WebsiteJSX

A modern full-stack web application built with React, Express.js, and MongoDB.

🚀 Tech Stack

Frontend

• React 19 - UI Library
• Vite - Build Tool
• TailwindCSS 4 - Styling
• React Router DOM - Routing
• Clerk - Authentication

Backend

• Express.js - Web Framework
• MongoDB with Mongoose - Database
• Clerk - Authentication & User Management
• Cloudinary - Image Upload & Management
• Multer - File Upload Middleware

📁 Project Structure

WebsiteJSX/
├── client/                 # Frontend React application
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── pages/         # Page components
│   │   ├── assets/        # Static assets
│   │   ├── App.jsx        # Main App component
│   │   └── main.jsx       # Entry point
│   ├── public/            # Public assets
│   ├── package.json       # Frontend dependencies
│   └── vite.config.js     # Vite configuration
├── server/                # Backend Express application
│   ├── controllers/       # Route controllers
│   ├── models/           # Database models
│   ├── routes/           # API routes
│   ├── middleware/       # Custom middleware
│   ├── configs/          # Configuration files
│   ├── package.json      # Backend dependencies
│   └── server.js         # Server entry point
└── README.md             # Project documentation

🛠️ Installation & Setup

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• MongoDB Atlas account
• Clerk account
• Cloudinary account

1. Clone the repository

git clone https://github.com/Febriyan2005/WebsiteJSX.git
cd WebsiteJSX

2. Install dependencies

Frontend:

cd client
npm install

Backend:

cd server
npm install

3. Environment Variables

Client (.env in client folder):

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_API_BASE_URL=http://localhost:5000

Server (.env in server folder):

MONGODB_URI=your_mongodb_connection_string
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
PORT=5000
NODE_ENV=development

4. Run the application

Development mode:

Terminal 1 (Backend):

cd server
npm run server

Terminal 2 (Frontend):

cd client
npm run dev

The frontend will be available at http://localhost:5173 The backend will be available at http://localhost:5000

🚀 Deployment

Frontend (Vercel)

1. Connect your GitHub repository to Vercel
2. Set build command: npm run build
3. Set output directory: dist
4. Add environment variables in Vercel dashboard

Backend (Vercel/Railway/Render)

1. Deploy the server folder
2. Set start command: npm start
3. Add all environment variables
4. Update CORS_ORIGIN with your frontend URL

📝 Available Scripts

Frontend

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Backend

• npm run server - Start development server with nodemon
• npm start - Start production server

🔧 Configuration

Clerk Setup

1. Create account at clerk.dev
2. Create new application
3. Get publishable key and secret key
4. Configure webhooks for user management

MongoDB Setup

1. Create account at MongoDB Atlas
2. Create new cluster
3. Get connection string
4. Whitelist your IP address

Cloudinary Setup

1. Create account at cloudinary.com
2. Get cloud name, API key, and API secret
3. Configure upload presets if needed

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Febriyan2005

• GitHub: @Febriyan2005