BlazeStack

A blazing-fast fullstack starter template powered by Vite, React, Shadcn UI, and Node.js. Perfect for building modern, scalable web applications with beautiful UI and efficient backend APIs.

Features

Backend (Express + MongoDB + TypeScript)

Express.js - Fast, unopinionated web framework
MongoDB with Mongoose - Elegant MongoDB object modeling
TypeScript - Type-safe JavaScript
Authentication - Secure cookie-based JWT authentication
Authorization - Role-based access control
Validation - Request validation using express-validator
Error Handling - Centralized error handling
Logging - Logging using Winston
Security - Helmet for security headers
CORS - Cross-Origin Resource Sharing with credentials

Frontend (React + TypeScript + Vite)

React 19 - Latest React version
TypeScript - Type-safe code
Vite - Next-generation frontend tooling
Tailwind CSS - Utility-first CSS framework
shadcn/ui - Beautifully designed components
React Router - Client-side routing
React Hook Form - Form validation
Zod - Schema validation
Axios - HTTP client

Getting Started

Prerequisites

Node.js (v14 or higher)
MongoDB (local or Atlas)

Installation

Clone the repository
Install dependencies for both client and server:

npm run install:all

Create a .env file in the server directory based on .env.example:

cp server/.env.example server/.env

Update the .env file with your MongoDB connection string and JWT secret

Development

Start both the client and server in development mode:

npm start

This will start:

Client at http://localhost:5173
Server at http://localhost:5000

Building for Production

npm run build

Project Structure

blazestack/
├── client/             # React frontend
│   ├── src/            # Source files
│   │   ├── components/ # UI components
│   │   ├── contexts/   # React contexts
│   │   ├── services/   # API services
│   │   └── ...
├── server/             # Express backend
│   ├── src/            # Source files
│   │   ├── config/     # Configuration files
│   │   ├── controllers/# Route controllers
│   │   ├── middleware/ # Custom middleware
│   │   ├── models/     # MongoDB models
│   │   ├── routes/     # API routes
│   │   └── ...
└── package.json        # Root package.json for scripts

Authentication System

The authentication system uses secure HTTP-only cookies for storing JWT tokens, providing:

Enhanced Security - HTTP-only cookies prevent JavaScript access to tokens
CSRF Protection - SameSite cookie attribute helps prevent CSRF attacks
Automatic Token Handling - Cookies are automatically sent with requests

Authentication Flow

User signs in or registers through the frontend
Server validates credentials and returns a JWT token in an HTTP-only cookie
Frontend stores user information in React context
Protected routes check authentication status
Logout clears the cookie and the context

programmerraja/BlazeStack