Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prathameshdhande22/bloogo-app
Bloogo App created using Python's FastAPI and React JS as Frontend. Create your Blog, edit Blog, view Blog.
https://github.com/prathameshdhande22/bloogo-app
blog fastapi jwt mongodb mongodb-atlas mongoengine mui poetry python3 reactjs redux tailwind tailwindcss vite vitejs webapp
Last synced: about 2 months ago
JSON representation
Bloogo App created using Python's FastAPI and React JS as Frontend. Create your Blog, edit Blog, view Blog.
- Host: GitHub
- URL: https://github.com/prathameshdhande22/bloogo-app
- Owner: PrathameshDhande22
- Created: 2023-07-17T16:34:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-09T05:48:11.000Z (11 months ago)
- Last Synced: 2024-02-09T14:59:27.753Z (11 months ago)
- Topics: blog, fastapi, jwt, mongodb, mongodb-atlas, mongoengine, mui, poetry, python3, reactjs, redux, tailwind, tailwindcss, vite, vitejs, webapp
- Language: JavaScript
- Homepage: https://bloogo.vercel.app
- Size: 3.72 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://bloogo.vercel.app) Frontend
[Bloogo API](https://bloogoapi.onrender.com) Backend
## Used Technologies and Products
1. [SMTPlib](https://docs.python.org/3/library/smtplib.html) for sending the email for account verification purpose.
2. [logo.com](https://app.logo.com/) for Creating the Bloogo logo.
3. [write.as](https://write.as/) Reference for creating the blog. Using The above website design.
4. [Footer Design](https://preview.colorlib.com/theme/bft/bootstrap-footer-17/#) Footer Design has been taken from the above website.
5. [Day.js](https://day.js.org/) Used for Formatting the Date recieved From backend.
6. [React Markdown Viewer](https://uiwjs.github.io/react-markdown-preview/) For Viewing the blog post.
7. [Animate.css](https://animate.style/) for Animating some components.
8. [Formik](https://formik.org/) used for handling client side validation of form data.
9. [yup](https://github.com/jquense/yup) used for creating the form schema that can be used with formik.
10. [Material UI](https://mui.com/) Great UI Components for react, creating the readymade and coding free components.
11. [React Icons](https://react-icons.github.io/react-icons/) Icons for using in various pages to make user Interaction more attractive.
12. [React Toastify](https://fkhadra.github.io/react-toastify/introduction) For adding the Notification to alert the user about any changes made by him.
13. [React Loader Spinner](https://mhnpd.github.io/react-loader-spinner/) Using this Library we added the loading components where the loading of data takes place.
14. [Loading.io](https://loading.io/) Using these website created the Loading.gif for showing with the react loader spinner.
15. [React Markdown Editor](https://uiwjs.github.io/react-md-editor/) Writing the blog post using these markdown components.
16. [React Select](https://react-select.com/home), Select component with create in it.
17. [Reading Time Estimator](https://www.npmjs.com/package/reading-time-estimator) Used for Read the whole blog and estimate the time to read it.
18. [Error Page Reference](https://colorlib.com/etc/404/colorlib-error-404-3/) From the above website the error page design has been made.
19. [moment.js](https://momentjs.com/) JS library for date utility for giving from how many hours or minutes have been over by uploading this blog.
20. [animista.net](https://animista.net/) For providing the CSS Animations for the Hamburger menu component.
21. [medium.com](https://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