Skip to content

README.md

Latest commit

 

History

History
226 lines (165 loc) · 5.42 KB

README.md

File metadata and controls

226 lines (165 loc) · 5.42 KB

🌐 MERN Stack Project

This is a full-stack web application built using the MERN (MongoDB, Express, React, Node.js) stack. It includes user authentication and core functionalities connected to a backend API.

📁 Project Structure

Intern/
├── frontend/                      # 🧩 Frontend React App
│   ├── public/                    # Static files (HTML, favicon, etc.)
│   │   ├── index.html
│   │   └── favicon.ico
│   ├── src/                       # Source code
│   │   ├── api/                   # API client setup (e.g., Axios)
│   │   ├── components/            # Reusable UI components
│   │   ├── context/               # React context providers
│   │   ├── pages/                 # Route-level components
│   │   ├── styles/                # Tailwind or CSS files
│   │   ├── types/                 # TypeScript interfaces/types
│   │   └── App.tsx                # Root component
│   ├── .env                       # Environment variables
│   └── package.json               # Project metadata & dependencies
│
├── backend/                       # 🚀 Backend Node.js Server
│   ├── prisma/                    # Prisma ORM schema and migrations
│   │   ├── schema.prisma          # Database schema definition
│   │   └── migrations/            # Auto-generated DB migrations
│   ├── src/                       # Application source code
│   │   ├── controllers/           # Request handlers
│   │   ├── middleware/            # Custom Express middlewares
│   │   ├── routes/                # API route definitions
│   │   ├── services/              # Business logic
│   │   ├── utils/                 # Utility/helper functions
│   │   └── index.ts               # App entry point
│   ├── .env                       # Backend environment variables
│   └── package.json               # Backend dependencies
│
└── README.md                      # 📘 Project documentation

🚀 Tech Stack

🔹 Backend

  • Node.js
  • TypeScript
  • Express
  • Prisma (ORM)
  • SQLite (Dev DB) or other DB via DATABASE_URL
  • JWT (Authentication)
  • bcrypt (Password Hashing)
  • Zod (Validation)

🔹 Frontend

  • React.js
  • TypeScript
  • Axios
  • React Router
  • TailwindCSS (if used)

⚙️ Setup Instructions

🔧 Prerequisites

  • Node.js & npm
  • Git
  • SQLite (or your preferred DB setup)
  • VS Code (Recommended)

📦 Clone the Project

git clone https://github.com/Krishnnavadiya/mern-project.git
cd mern-project

🛠 Backend Setup

cd backend
npm install

🧪 Configure Environment

Create a .env file in the backend folder:

DATABASE_URL="file:./dev.db"
JWT_SECRET="your-secret-key"
PORT=5000

🔁 Prisma Setup

npx prisma generate
npx prisma migrate dev

▶️ Start Backend Server

# Development
npm run dev

# Production
npm run build
npm start
  • Backend API: http://localhost:5000/api
  • Health check: http://localhost:5000/api/health

💻 Frontend Setup

cd ../frontend
npm install

▶️ Start Frontend App

npm run dev
  • Frontend App: http://localhost:5173 (or your Vite port)

🧪 Testing API

Use Postman or browser to test the following endpoints:

  • POST /api/auth/register → Register new user
  • POST /api/auth/login → Login
  • GET /api/health → Health check

🧩 Common Scripts

🔧 Backend

Script Description
npm run dev Run server in dev mode
npm run build Build for production
npm start Start production build
npm test Run tests
npm run lint Run ESLint
npm run format Format code using Prettier

🎨 Frontend

Script Description
npm run dev Start React dev server
npm run build Build optimized production app
npm run preview Preview built app

⚠️ Troubleshooting

  • Port Already in Use:
    Change port in .env or kill the process using it.

  • Database Issues:
    Recheck DATABASE_URL
    Use:

    npx prisma migrate reset

  • Dependency Errors:

    rm -rf node_modules package-lock.json
npm install

📚 Development Guidelines

  • Create new branches for new features
  • Commit frequently with meaningful messages
  • Run npm run lint and npm run format before pushing
  • Keep code modular and readable
  • Update README/API docs as needed

📌 API Overview

🔐 Auth Routes

  • POST /api/auth/register – Register
  • POST /api/auth/login – Login

More routes available inside backend/src/routes/

✅ Deployment (Optional)

  • Backend: Host on Render, Railway, or Vercel (API)
  • Frontend: Host on Netlify or Vercel

👨‍💻 Author

Krishn Navadiya
GitHub: @Krishnnavadiya