Bloogo APP

A Blog App for all Coders, Programmers, and other.

A Bloogo app made using react js as frontend and FastAPI as backend, and Storing data in a MongoDB ulimately also known as FARM Stack APP.

Bloogo Features

1. Markdown Blogging:

   • Description: Users can create and publish blog posts using Markdown syntax for rich and structured content.

2. Tagging System:

   • Description: Bloggers can categorize their posts by adding tags, facilitating content organization.

3. Thumbnail Upload:

   • Description: Users can upload custom thumbnails for their blog posts, enhancing visual appeal.

4. Advanced Login/Register System:

   • Description: Robust user authentication system ensures secure login and registration processes.

5. Cloudinary Integration:

   • Description: Images are stored and managed using Cloudinary, a cloud-based media management solution.

6. User Profile Image:

   • Description: Users can upload and personalize their profile images.

7. Search Features:

   • Description: Users can search for blogs based on various criteria, including content, author, and tags.

8. FastAPI for Automatic Error Handling:

   • Description: Utilizing FastAPI library for automatic error handling, ensuring smooth and efficient error resolution.

9. JWT Verification:

   • Description: JSON Web Token (JWT) verification is implemented for secure authentication and authorization.

10. Account Verification through Email:

    • Description: Users undergo account verification through email, enhancing security and confirming valid user accounts.

Deployed Links

Bloogo APP Frontend

Bloogo API Backend

Used Technologies and Products

1. SMTPlib for sending the email for account verification purpose.
2. logo.com for Creating the Bloogo logo.
3. write.as Reference for creating the blog. Using The above website design.
4. Footer Design Footer Design has been taken from the above website.
5. Day.js Used for Formatting the Date recieved From backend.
6. React Markdown Viewer For Viewing the blog post.
7. Animate.css for Animating some components.
8. Formik used for handling client side validation of form data.
9. yup used for creating the form schema that can be used with formik.
10. Material UI Great UI Components for react, creating the readymade and coding free components.
11. React Icons Icons for using in various pages to make user Interaction more attractive.
12. React Toastify For adding the Notification to alert the user about any changes made by him.
13. React Loader Spinner Using this Library we added the loading components where the loading of data takes place.
14. Loading.io Using these website created the Loading.gif for showing with the react loader spinner.
15. React Markdown Editor Writing the blog post using these markdown components.
16. React Select, Select component with create in it.
17. Reading Time Estimator Used for Read the whole blog and estimate the time to read it.
18. Error Page Reference From the above website the error page design has been made.
19. moment.js JS library for date utility for giving from how many hours or minutes have been over by uploading this blog.
20. animista.net For providing the CSS Animations for the Hamburger menu component.
21. medium.com Search Page & Blog according to Tag Reference has been taken from Medium.com Website.

Timeline

• Day 1 - 17 July 2023

  • Project Intialize. 🗒️

• Day 2 - 18 July 2023

  • Gathering Information on how to integrate google login and selecting the correct database. 🔎
  • Started working on Backend installed various library. 💻

• Day 3 - 19 July 2023

  • Started creating the api
  • Created the Folder and Managing various file 📂

• Day 4 - 20 July 2023

  • Implemented Database and Models 📅
  • Login,Register and Authorization Code ✅
  • Email Verification Code 📧

• Day 5 - 21 July 2023

  • Completed Backend for Blog endpoint 💻
  • Completed Backend for Tags endpoint 💻
  • Completed Backend for Profile Endpoint 💻

• Day 6 - 22 July 2023

  • Implemented full backend only google login is remaining in it. ⌨️
  • Documented the api backend. 📄
  • Frontend Initialized. 🌐

• Day 7 - 23 July 2023

  • Initialized the tailwindcss.
  • Server Side rendering to be done.

• Day 8 - 24 July 2023

  • Created the logo, Favicon for our website.

• Day 9 - 27 July 2023

  • Implemented Header and Home Page or Landing Page.
  • Implemented Footer.

• Day 10 - 28 July 2023

  • Implemented About and Developer Page and modified some CSS constraints in Header and Footer.
  • Applied the CORS Middleware to the Backend for successful communication with the frontend.
  • Implemented Full Page Blog.

• Day 11 - 29 July 2023

  • Implemented the Login and signup page and integrated backend.
  • Improved some Authentication in Frontend.

• Day 12 - 30 July 2023

  • Implemented Logout,Profile and Email Verification Pages.
  • Implemented Protected Routes.
  • Created Account on Cloudinary for image uploading and image resizing.
  • Implemented Error Page 404 Not Found Page.

• Day 13 - 31 July 2023

  • Modified Update Endpoint of Backend.
  • Added verify token without needing the token in Backend.
  • Get Author profile with author related Blogs added in Backend.

• Day 14 - 1 August 2023

  • Modified Profile Avatar in Header.
  • Integrated the backend with profile Page.

• Day 15 - 2 August 2023

  • Implemented the Profile Popover.
  • Implemented Profile Page
  • Forgot Password and change Password Page added.
  • Blog Page Added.
  • Working on Write Blog Page.

• Day 16 - 3 August 2023

  • Implemented Write Blog Page.
  • Implemented API call for Write Blog Page.

• Day 17 - 4 August 2023

  • Optimized the Code for Frequently appearing Dialog Boxes.
  • Fixed the Blog Thumbnail Not uploading.
  • Reading Time Estimator and Uploaded the blogs in min,hours,day ago in Blog View Page.
  • Fixed Jodit Editor for Various Toolbar.

• Day 18 - 5 August 2023

  • Fixed some bugs in Backend related to Date in blog.
  • Implemented Dashboard page for login User.
  • Delete and Edit button Added for each blog for the user who has created the blog.
  • Public Profile page Implemented using which User's can view Bloogo Blog Author Profile.
  • Fixed Some Issue related to Profile Picture in Profile Component
  • Added the Share button to share the blog with various Social Media.
  • Fixed Upload Button Issue in Upload Thumbnail in Create New Blog Page.

• Day 19 - 6 August 2023

  • Added Estimated Reading Time for each Blogcard
  • Implemented Edit Page will full Performance Support
  • Reduced the Words per minute for Estimate Reading Time
  • Added SearchBar in the Header and Implemented Search Home Page.
  • Implemented Recent Searches in the Search Home Page

• Day 20 - 7 August 2023

  • Implemented Search Page for Blog.
  • Modification in Search page.
  • Modification in Dashboard Page.
  • Created the Place Holder for Blog Page.

• Day 21 - 8 August 2023

  • Implemented Blog Author Search Page.
  • Implemented Profile cards to shown in Author Search Page.
  • Simple Modification in Search Page.
  • Updated Placeholder for Author Page.

• Day 22 - 9 August 2023

  • Improved Searching for Profiles in backend.
  • Implemented Search Tag page.
  • Implemented Tag Page.
  • Implemented Full Frontend Now Ready to Host.
  • Future Work or updates will be worked after availability of app.

• Day 23 - 10 August 2023

  • Implemented Full Page and optimized some images.
  • Blog View has been modified.
  • Project Completed.
  • Deployed the Project.

  ============= NEW UPDATE LOGS ==============

• Day 24 - 06 February 2024

  • Researching for new Email Sender SMTP.
  • Researching of New Editor for blog writing.

• Day 25 - 07 February 2024

  • Implemented the Email Sender SMTP with smtplib library of python.
  • Loading component implemented in various Pages to minimize the pressure on backend.
  • Improved functionality when the blog is deleted the whole page is being reloaded so removed the reloaded code.
  • Implemented the New Markdown Editor for writing the blogs.
  • Now the Images or thumbnails can be directly uploaded to Backend Fastapi integrated the cloudinary in the backend.
  • Switched from client side image uploading to server side image uploading.
  • Improved the experience with the tag and solved the issue related to selecting the tag.

• Day 26 - 08 February 2024

  • Improved the taglist edit blog experience.
  • Improved the Profile Image uploading to the backend and frontend.
  • Updated and user deleted blog Images deletion service Implemented for optimize the performance of the cloudinary service.
  • Added the new Meta Tags to the frontend.
  • Change of version from v1.0 to v1.5.0.
  • Optimization of Code in the frontend Part.
  • New Updates Implemented and completed the Project.
  • Deployed The Project.

Bloogo App v1.5.0 Update Log

Optimized Frontend and Rendering

• Improved performance with optimized frontend and rendering for a smoother user experience.

Shifted Uploading Images to Server Side

• Enhanced security by moving image uploading from client-side to server-side.

Added "Please Wait" Component for API Calls

• Implemented a "Please Wait" component during API calls for login, signup, forgot password, and change password functionalities.

Cloudinary Image Deletion Functionality

• Users can now delete images from Cloudinary server to minimize storage.

Removed setTimeout Function

• Eliminated the use of setTimeout function from various pages for improved code efficiency.

SMTPlib for Mail Sending

• Utilized smtplib for sending emails, removing dependency on the brevo SMTP server.

Future Work/Updates

1. Google Login
2. Dark Mode Feature

Guide

Guide For running the project locally in your system.

Running the Backend

1. Clone the Repository

git clone https://github.com/PrathameshDhande22/Bloogo-App.git

2. Make Sure You have python installed in your system with version => 3.10.3

Goto backend Folder.

cd backend

3. Simple command it will automatically create the virtual environment and install the packages.

   Note : The Poetry package should be installed in our System before triggering the below commands.

poetry install

if any error comes google the error it will Solved.

4. Create .env file

MONGODB_URI=Your Mongodb URI
SECRET=Jwt secret
EMAIL= Your Email addresss
PASSWORD= Your email address password
LINK=http://localhost:5173 of the frontend.
CLOUD_NAME=cloudinary cloud name
API_KEY=Cloudinary api key
API_SECRET=Cloudinary api secret
UPLOAD_PRESET=Cloudinary Upload preset

7. Run

python run.py

😃😃 Backend is Running Successfully in your System.

Running the Frontend

1. Navigate to Frontend Folder.

cd frontend

2. Create .env File in it which contains various Values.

VITE_BASE_API=backend running url
VITE_CLOUD_NAME=cloudinary cloud name

3. Install the dependencies.

npm install

4. Run the project.

npm run dev

😃😃 The project setup is complete.

In Case you attempted any error you can mail me on [email protected]

Author : Prathamesh Dhande