Unveiling the ChatGPT Webapp

Unveiling the ChatGPT Webapp

Table of Contents:

1. Introduction
2. Design Changes
3. Home Page 3.1. Generated Articles 3.2. Pagination
4. Create Button 4.1. Survey Format 4.2. Submitting Questions and Answers
5. Back-End Communication 5.1. Communicating with Chatgibility 5.2. Generating a Response
6. Loading Screen
7. Displaying Generated Article on Home Page
8. Viewing the Article
9. Deleting an Article
10. Publishing an Article 10.1. Committing to GitLab Repository 10.2. Notify Rebuilding the Blog
11. User Login 11.1. Logging in with Google (OAuth 2.0) 11.2. Advantages of Using Firebase Auth
12. Front-End and Back-End Integration 12.1. Sending JWT Token to Custom Backend 12.2. Firebase Admin Verification
13. Conclusion

Introduction In this devlog update, I will be discussing the recent changes I made to my project. I have implemented design changes and added new features to enhance the functionality of the website.

Design Changes The home page has undergone significant design updates. Instead of a static layout, it now displays a list of dynamically generated articles. This change allows for better organization and easy navigation for users.

Home Page The home page now showcases a list of generated articles. These articles are paginated to ensure smooth browsing experience for the users. Each article is displayed with a brief description to give users a glimpse of its content.

Create Button A new feature has been added to the menu - the Create button. Clicking on this button opens a survey format where users can answer a series of questions. These questions will be used to generate a custom article based on the user's input.

Back-End Communication The communication between the front-end and back-end is essential for generating a response. The custom back-end communicates with Chatgibility to generate appropriate responses based on the user's input.

Loading Screen After submitting the survey form, a loading screen appears as the request is sent to the custom back-end. It may take a minute to receive the response. Once the response is received, the page refreshes and the generated article is pushed to the home page.

Displaying Generated Article on Home Page The home page now displays the latest article generated by the user at the top. This allows users to easily access their recently created content.

Viewing the Article Clicking on an article from the home page opens the complete article. The content of the article is formatted using Markdown language and converted into HTML for better readability.

Deleting an Article For user convenience, a delete button is provided with each article. Users can easily remove articles they no longer need from the website.

Publishing an Article Users also have the option to publish the generated article to their actual blog. By providing the necessary information such as the title, tags, and file path, the article can be published to their chosen blogging platform. A commit is made to the GitLab repository, triggering a blog rebuild.

User Login A significant change in the authentication flow has been implemented. Instead of traditional username and password login, users now have the option to log in with their Google account using OAuth 2.0. This change eliminates the need to handle and store passwords, making the authentication process more secure.

Front-End and Back-End Integration To ensure seamless communication between the front-end and back-end, a JWT token is utilized. The front-end receives the token from Firebase, and it is sent to the custom back-end for verification. Firebase admin library is used to verify the token's authenticity before responding to the front-end.

Conclusion These updates and changes have greatly improved the user experience of the website. The integration of Firebase auth, survey format for generating articles, and seamless front-end and back-end communication have made the website more efficient and user-friendly.

Highlights

• Redesigned home page with a list of generated articles
• Survey format for creating custom articles
• Improved back-end communication with Chatgibility for generating responses
• Authentication using Google OAuth 2.0 for enhanced security
• Easy publishing of articles to actual blogs
• Integration of Firebase for seamless front-end and back-end communication

FAQ:

Q: How does the new survey format work for generating articles? A: The survey format allows users to answer specific questions, which are then used to generate a custom article based on their input. This format makes it easier for users to provide the necessary information for article generation.

Q: Can I delete articles that I no longer need? A: Yes, each article displayed on the website comes with a delete button. You can easily remove articles that you no longer require.

Q: How can I publish my generated article to my actual blog? A: To publish an article, you need to provide the title, tags, file path, project namespace, and GitLab API key. Once you hit publish, a commit is made to your GitLab repository, which triggers a blog rebuild.