A Full-Stack blog Website built with React and Flask (For desktop and Mobile),
allowing users to create, edit, read, delete and also comment on blog posts.

CLICK HERE TO View DEMO VIDEO
Video Demo: https://www.youtube.com/watch?v=czHZuR-iutA

Frontend

Backend

Table of Contents

1. About The Project
2. Features
   • 🌐 General
   • 🔐 Authentication & Authorization
   • 🧭 Navigation & Layout
   • 🔑 Authentication UX
   • 🏠 Homepage (Posts Feed)
   • 📝 Post Page
   • 👤 User Posts
3. TECH STACK
   • Frontend
   • Backend
4. Folders & Files Structure
5. Installation & Setup

About The Project

is a full-stack blog post application that allows users to share content and interact with posts created by others in a simple and intuitive way.

Users can register and log in, create new blog posts, view all posts shared across the platform, comments on them, and fully manage their own content by editing or deleting their posts.

Each post supports comments, enabling discussion and interaction between users.

The main posts feed provides multiple sorting options, allowing users to browse posts by most commented, newest, or random, making content discovery more engaging and dynamic.

The application includes proper authentication and authorization to ensure users can only modify their own posts, while still being able to read and comment on any post available on the site.

is a fully responsive website that is compatible with both mobile and desktop devices,
ensuring a smooth user experience across different screen sizes.

(back to top)

Features

offers a set of core features designed to deliver a complete blogging experience:

🌐 General :

• Fully responsive design for both desktop and mobile devices.
  
• Redirect-based error handling with graceful fallbacks for invalid routes, parameters, and resources.
  
• Global handling of unknown routes with automatic redirection to the homepage.
  
• Efficient http-requests caching & recaching mechanism to minimize unnecessary network calls and improve performance.
  

🔐 Authentication & Authorization :

• Secure JWT-based authentication using HTTP-only cookies.
  
• Authentication-aware routing with automatic redirection based on user state (Logged in Or not).
  
• Backend authorization middleware that validates JWT cookies on every request.
  
• Automatic logout when authentication tokens are missing, invalid, or expired.
  
• Sliding-session JWT handling with:
  
  1. Automatic renewal when tokens are within 1 hour of expiration.
  2. Token expiration set to 7 days.
     

🧭 Navigation & Layout :

• Responsive navigation system with a sticky desktop navbar.
  
• Mobile-friendly hamburger menu for authenticated users.
  
• Reusable modal system with intuitive dismissal behavior.
  

🔑 Authentication UX :

• Strong password validation enforcing length and complexity requirements.
  
• Password visibility toggle (show/hide) on login and registration forms.
  

🏠 Homepage (Posts Feed) :

• Dynamic and responsive grid layout for displaying the posts feed.
  
• Single-column layout optimized for mobile devices.
  
• Post creation via modal-based interface.
  
• Dropdown & Route-based posts feed sorting using URL search parameters:
  
  1. Newest (default)
  2. Most commented
  3. Random
     
• Validation and automatic fallback to default sorting for invalid query values.
  
• Post navigation via clickable post cards with shareable, ID-based URLs.
  

📝 Post Page :

• Direct access to post pages via URL using post IDs.
  
• Automatic redirection to the posts feed for invalid or non-existent post IDs.
  
• Comment creation via modal-based interface.
  
• View post's comments.
  

👤 User Posts :

• Desktop table view for managing user posts.
  
• Mobile-optimized single-column card layout.
  
• Post navigation via clickable entries.
  
• Modal-based post editing and deletion.
  

Tech Stack

Frontend

• React – UI library for building component-based user interfaces
• Vite – Fast development build tool and bundler
• Styled Components – Component-level styling with scoped CSS
• React Router – Client-side routing and navigation
• Redux Toolkit – Predictable state management
• RTK Query – Data fetching and caching for HTTP requests

Backend

• Python – Backend programming language
• Flask – Lightweight web framework for RESTful APIs
• JWT (JSON Web Tokens) – Authentication and session handling
• HTTP-only Cookies – Secure client-side token storage
• Flask-CORS – Cross-Origin Resource Sharing configuration
• SQLite – Lightweight relational database

Folders & Files Structure

project/
├─ README.md                       # Project overview, setup & usage
├─ client/                         # Frontend (React + Vite)
│  ├─ .gitignore                    # Files ignored by git
│  ├─ index.html                    # HTML entry
│  ├─ package.json                  # NPM scripts & dependencies
│  ├─ vite.config.js                # Vite config
│  ├─ jsconfig.json                 # JS/TS path config
│  ├─ public/                       # Static public assets
│  └─ src/                          # Application source
│     ├─ App.jsx                    # Root app component
│     ├─ main.jsx                   # App bootstrap (ReactDOM)
│     ├─ appProviders/              # App-level providers (redux, styles)
│     │  ├─ AppProviders.component.jsx
│     │  ├─ Redux.provider.jsx
│     │  └─ Styles.provider.jsx
│     ├─ assets/                    # Asset exports (icons, images)
│     │  └─ index.js
│     ├─ customHooks/               # Reusable hooks
│     │  ├─ index.js
│     │  ├─ useCheckDeviceType.js
│     │  ├─ useIsUserLoggedIn.js
│     │  └─ useModal.js
│     ├─ globalStyles/              # Theme & global styles
│     │  ├─ GlobalStyles.jsx
│     │  ├─ heartBeatAnimation.js
│     │  ├─ index.js
│     │  ├─ theme.js
│     │  └─ underline.js
│     ├─ pages/                     # Page-level components
│     │  ├─ index.js
│     │  ├─ authPages/              # Auth screens (login/register)
│     │  │  ├─ index.js
│     │  │  ├─ authPages.styles.jsx
│     │  │  └─ components/
│     │  │     ├─ AuthDesktopImg.component.jsx
│     │  │     └─ ...
│     │  │  ├─ login/
│     │  │  │  └─ Login.page.jsx
│     │  │  └─ register/
│     │  │     ├─ Register.page.jsx
│     │  │     └─ register.styles.jsx
│     │  ├─ homePage/
│     │  │  ├─ Home.page.jsx
│     │  │  ├─ home.styles.jsx
│     │  │  └─ components/...
│     │  ├─ postPage/
│     │  │  ├─ Post.page.jsx
│     │  │  ├─ post.styles.jsx
│     │  │  └─ components/...
│     │  └─ userPosts/
│     │     ├─ UserPosts.page.jsx
│     │     ├─ userPosts.styles.jsx
│     │     └─ components/
│     │        └─ deletePostModal/
│     ├─ redux/                      # Redux setup & services
│     │  ├─ index.js
│     │  ├─ store.js
│     │  ├─ apiServices/
│     │  │  ├─ apiServices.js
│     │  │  └─ postApiServices.js
│     │  └─ stateManager/
│     │     └─ interface.slice.js
│     ├─ sharedComponents/           # Reusable UI components
│     │  ├─ index.js
│     │  ├─ common/
│     │  │  └─ RedirectUndefinedRoute.component.jsx
│     │  └─ ui/
│     │     ├─ index.js
│     │     ├─ authInput/
│     │     ├─ btnLoader/
│     │     ├─ button/
│     │     ├─ modal/
│     │     ├─ post/
│     │     └─ postModal/
│     ├─ sharedLayouts/              # App layouts & navbar
│     │  ├─ SharedLayouts.component.jsx
│     │  ├─ sharedLayouts.styles.jsx
│     │  ├─ hamburgerMenu/
│     │  │  ├─ HamburgerMenu.component.jsx
│     │  │  ├─ hamburgermenu.styles.jsx
│     │  │  └─ menuItem/
│     │  └─ navbar/
│     │     ├─ Navbar.component.jsx
│     │     ├─ navbar.styles.jsx
│     │     └─ components/
│     └─ utils/                      # Utility functions & constants
│        ├─ constants.js
│        ├─ handleInputChange.js
│        └─ index.js
└─ server/                          # Backend (Flask)
   ├─ .env                          # Environment variables (⚠️ sensitive)
   ├─ .gitignore
   ├─ app.py                        # Flask application entry
   ├─ requirements.txt              # Python dependencies
   ├─ server_architecture.txt       # Architecture notes / diagrams
   └─ src/
      ├─ config/
      │  ├─ __init__.py
      │  ├─ connect_db.py           # DB connection helper
      │  ├─ generate_tables.py      # Schema generation / migrations
      │  └─ jwt_config.py           # JWT keys/config
      ├─ posts/
      │  ├─ __init__.py
      │  ├─ controller.py           # Posts endpoints / handlers
      │  ├─ helpers.py              # Posts business logic helpers
      │  ├─ tables.py               # SQL table definitions
      │  └─ triggers.py             # DB triggers related to posts
      ├─ users/
      │  ├─ __init__.py
      │  ├─ controller.py           # User endpoints / handlers
      │  ├─ helpers.py              # User helpers (auth, hashing)
      │  └─ table.py                # Users table schema
      └─ utils/
         ├─ __init__.py
         ├─ constants.py
         └─ request_helpers.py      # Request validation, parsing helpers

Installation & Setup

cd client && npm install && npm run dev

cd server && pip install -r requirements.txt && flask run