Orbit

Orbit is a full‑stack MERN application built with a modular architecture that keeps frontend and backend separate for scalability and maintainability. It includes secure JWT authentication, image upload handling with Multer, and Cloudinary integration for cloud storage. The frontend uses Tailwind CSS for a modern, responsive UI.

Table of Contents

• Features
• Tech Stack
• Project Structure
• Prerequisites
• Environment Variables
• Installation & Running
  • Backend
  • Frontend
• Testing
• Deployment Notes
• Contributing
• License
• Contact

Features

• Modular architecture with separate frontend and backend
• JWT-based authentication and protected routes
• Image uploads using Multer
• Cloud storage integration with Cloudinary
• Responsive UI built with Tailwind CSS

Tech Stack

• Frontend: React.js, Tailwind CSS
• Backend: Node.js, Express.js
• Database: MongoDB
• Authentication: JWT (JSON Web Tokens)
• File Handling: Multer
• Cloud Storage: Cloudinary

Project Structure

Orbit/ ├── backend/ # Server-side code
│ ├── controllers/ # Request handlers
│ ├── models/ # Database models
│ ├── routes/ # API routes
│ └── server.js # Server entry point
└── frontend/ # Client-side code
├── components/ # React components
├── pages/ # React pages
└── tailwind.config.js # Tailwind CSS configuration

Prerequisites

• Node.js v14+ (recommended latest LTS)
• npm (comes with Node.js)
• MongoDB (local instance or MongoDB Atlas)
• Cloudinary account for image storage

Environment Variables

Create a .env file in the backend directory with the following variables:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLOUDINARY_URL=your_cloudinary_url
PORT=5000

• MONGO_URI: MongoDB connection string (local or Atlas)
• JWT_SECRET: Secret for signing JWT tokens
• CLOUDINARY_URL: Cloudinary connection URL (or set CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET depending on your Cloudinary setup)
• PORT: Optional, default server port (e.g., 5000)

Installation & Running

Open two terminals (one for backend, one for frontend) or use a process manager to run both.

Backend

1. Navigate to the backend directory: cd backend
2. Install dependencies: npm install
3. Create the .env file (see Environment Variables).
4. Start the backend server: npm start
   • If your project uses a dev script like nodemon, run: npm run dev

The backend will start on the port defined in your .env (default 5000).

Frontend

1. Navigate to the frontend directory: cd frontend
2. Install dependencies: npm install
3. Start the frontend development server: npm start

The frontend will typically run on http://localhost:3000 and should be configured to communicate with the backend API (check any proxy or REACT_APP_API_URL settings).

Testing

• Backend: Use Postman, Insomnia, or curl to test API endpoints (authentication, image upload routes, CRUD).
• Frontend: Open the app in a browser at http://localhost:3000 and verify authentication flows, upload flow, and responsiveness across devices.

Deployment Notes

• Ensure environment variables are set in your hosting platform (Heroku, Vercel, Render, DigitalOcean, etc.).
• For Cloudinary, use secure environment variables for API keys.
• Serve the frontend as a static build (npm run build) and either host separately (Netlify/Vercel) or configure your backend to serve static files from the frontend/build folder for a single‑server deployment.

Contributing

Contributions are welcome! Suggested workflow:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/your-feature
3. Commit your changes: git commit -m "Add feature"
4. Push and open a pull request

Please include clear descriptions and any relevant testing notes in your PR.