{"id":23171256,"url":"https://github.com/ucangun/blog_motion","last_synced_at":"2026-05-08T17:44:17.599Z","repository":{"id":259095475,"uuid":"858094337","full_name":"ucangun/Blog_Motion","owner":"ucangun","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-23T22:24:17.000Z","size":256,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-24T10:56:13.476Z","etag":null,"topics":["authentication","react-icons","react-router","redux","toastify","typescript","validation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ucangun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-16T09:49:01.000Z","updated_at":"2024-10-23T22:24:20.000Z","dependencies_parsed_at":"2024-10-25T14:44:35.958Z","dependency_job_id":"895c98b1-7f9f-4c76-844d-8ae838db677f","html_url":"https://github.com/ucangun/Blog_Motion","commit_stats":null,"previous_names":["ucangun/blog_motion"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ucangun%2FBlog_Motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ucangun%2FBlog_Motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ucangun%2FBlog_Motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ucangun%2FBlog_Motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ucangun","download_url":"https://codeload.github.com/ucangun/Blog_Motion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266478,"owners_count":20910832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","react-icons","react-router","redux","toastify","typescript","validation"],"created_at":"2024-12-18T04:16:56.194Z","updated_at":"2026-05-08T17:44:12.568Z","avatar_url":"https://github.com/ucangun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📝 BlogMotion: Where Stories Find Motion\n\nhttps://www.blogmotions.de/\n\nBlogMotion is a full-stack blogging platform that empowers users to share their stories, discover inspiring content, and engage with a vibrant community. With a focus on modern web development practices, BlogMotion leverages a rich technology stack to deliver a seamless user experience.\n\n## 🌟 Project Purpose\n\nBlogMotion is designed to provide users with a dynamic platform where they can:\n\n- Write and publish their own blogs with advanced text editing features.\n- Discover, like, and comment on blogs written by other users.\n- Manage their personal account information, including password and profile updates.\n- Reset forgotten passwords securely via email verification.\n- Register or log in using Google OAuth for a hassle-free experience.\n- Subscribe to newsletters and make symbolic test payments using Stripe.\n\n## 🎬 Output\n\n![Blog Motion](https://github.com/user-attachments/assets/e9c636fe-d5bd-4fec-be0f-bca7c00c869f)\n\n\n## 🛠️ Technologies Used\n\n### **Frontend:**\n\n- **ReactJS** with **TypeScript**: For building a robust and type-safe user interface.\n- **Material UI (MUI)**: The primary styling library for a consistent and professional design.\n- **Tailwind CSS**: Used selectively for custom styling.\n- **Formik \u0026 Yup**: For managing and validating forms efficiently, especially for user registration and login.\n- **React Router**: Implements navigation through `AppRouter` and `PrivateRouter` for protected routes.\n- **React-Quill**: Provides a rich text editor for blog creation.\n- **Redux Toolkit**: Manages global state efficiently, including user authentication and blog data.\n- **Redux Persist**: Ensures session persistence for user data across page refreshes.\n- **Toastify \u0026 SweetAlert**: For interactive user notifications and alerts.\n- **React Icons**: Adds visually appealing icons throughout the app.\n- **React Share**: Enables users to share blogs across various social platforms.\n- **Axios**: Handles HTTP requests to interact with the backend.\n\n### **Backend:**\n\n- **Node.js** with **Express.js**: Provides the foundation for backend services.\n- **MongoDB** with **Mongoose**: Handles data storage and schema modeling.\n- **JWT (JSON Web Tokens)**: Ensures secure user authentication and protected route access.\n- **Nodemailer**: Sends email notifications for password resets and other interactions.\n- **Swagger**: Documents API endpoints for easier developer collaboration.\n- **Redoc-Express**: Simplifies API documentation presentation.\n- **Passport.js (Google OAuth20)**: Enables secure and convenient Google-based login and registration.\n- **Stripe**: Processes symbolic newsletter subscription payments.\n- **Node Cron**: Schedules recurring tasks, such as automated email reminders.\n- **Express-Async-Errors**: Simplifies error handling in asynchronous routes.\n- **Validator**: Validates and sanitizes user inputs to ensure data integrity.\n- **Morgan**: Logs HTTP requests for monitoring and debugging purposes.\n- **Connect-Mongo**: Stores session data in MongoDB for secure user sessions.\n- **Cookie-Parser**: Parses cookies for session management.\n\n## ⚙️ Features\n\n### **User Management:**\n\n- Register and log in via email/password or Google OAuth.\n- Secure password reset with email verification and a 6-digit code.\n- View and update account information, including username, email, and password.\n- **Email Verification:** After registration, users must verify their email address to activate their account. A verification link is sent to the user's email.\n\n### **Blog Management:**\n\n- Write blogs using a rich text editor with formatting options.\n- View blogs written by other users with like and comment functionalities.\n- Share blogs across social media platforms.\n\n### **Payment Integration:**\n\n- Symbolic newsletter subscription payment using Stripe for a test payment.\n\n### **Interactive Notifications:**\n\n- Receive success/error notifications for actions like login, registration, and blog creation.\n\n## 🔐 Authentication Flow\n\n1. **User Authentication:**\n\n   - Login and registration are handled via custom APIs.\n   - Secure JWT and simple tokens are generated upon successful login.\n   - **Email Verification:** After registration, users receive a verification email to confirm their account.\n\n2. **Protected Routes:**\n\n   - Access to private pages requires a valid JWT or simple token in the request headers.\n\n3. **Google OAuth:**\n   - Simplifies user onboarding with Google login.\n\n## 📚 API Documentation\n\nAPI documentation is available via Swagger UI and Redoc. Access endpoints for testing and integration details:\n\n- Swagger: `/api-docs`\n- Redoc: `/redoc`\n\n## 🛒 Stripe Integration\n\n- Stripe is integrated for symbolic newsletter subscriptions.\n- Users can subscribe to newsletters with a test payment of 1 Euro.\n\n## 🚀 Development Highlights\n\n- **Full Stack Implementation:** Built with a modern tech stack combining ReactJS, TypeScript, Node.js, and MongoDB.\n- **Scalable Design:** Reusable components and modular architecture ensure long-term maintainability.\n- **Interactive UI:** Provides a rich and engaging user experience with advanced styling and state management.\n\n\u003cp align=\"center\"\u003e🚀 Happy Blogging with BlogMotion! 🚀\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fucangun%2Fblog_motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fucangun%2Fblog_motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fucangun%2Fblog_motion/lists"}