Brief Description:
A web application that [briefly describe the purpose of the app, e.g., "allows users to manage and view blog posts, access protected user profiles, and more, built with a React frontend and a Node.js/Express backend."].

Hosted URL: https://daveyrockets.vercel.app

Table of Contents

• Features
• Installation
• Configuration
• Usage
• Deployment
• Technologies Used
• Contributing
• License

Features

• User authentication with JWT tokens
• Protected routes for authenticated users
• Blog management (view, add, edit, delete posts)
• Contact form with backend processing
• Responsive design with TailwindCSS
• Deployed on Vercel

Installation

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)
• MongoDB (for local development)

Clone the Repository

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

Backend Setup

1. Navigate to the server directory:

   cd server

2. Install dependencies:

   npm install

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

   PORT=3002
   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET_KEY=your_secret_key
   

4. Start the backend server:

   npm start

Frontend Setup

1. Navigate to the client directory:

   cd ../client

2. Install dependencies:

   npm install

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

   REACT_APP_API_URL=http://localhost:3002/api
   

4. Start the frontend server:

   npm start

Configuration

Environment Variables

• Server:

  • PORT: Port for the Express server.
  • MONGO_URI: MongoDB connection string.
  • JWT_SECRET_KEY: Secret key for signing JWT tokens.

• Client:

  • REACT_APP_API_URL: The base URL for the API calls.

Usage

Running Locally

1. Ensure both the backend and frontend servers are running.
2. Open your browser and navigate to http://localhost:3001.

Features

• Login/Logout: Users can log in with their email and password. Upon login, a JWT token is stored in local storage, allowing access to protected routes.
• Profile Page: Access protected content by navigating to /profile. Only authenticated users can access this page.
• Blogs: Users can view a list of blogs, as well as individual blog details.

Deployment

Deploying on Vercel

1. Frontend:

   • Vercel automatically detects and configures a React project. Ensure the client directory is properly set up.
   • Build command: npm run build
   • Output directory: build

2. Backend:

   • Ensure your server directory is configured for production.
   • Set up environment variables in the Vercel dashboard.
   • Deploy the backend as a Node.js project or serverless functions.

Post-Deployment

• Access your live project via the Vercel-provided URL.
• Monitor the Vercel dashboard for build and runtime logs.
• Verify CV download works correctly.

Technologies Used

• Frontend:

  • React
  • TailwindCSS
  • Axios

• Backend:

  • Node.js
  • Express
  • MongoDB
  • JWT

Design Tokens & Theming

This project uses Tailwind CSS with an extended design token set to ensure a consistent visual language:

• Colors: defined under theme.extend.colors.brand in client/tailwind.config.js (gold, purple, cream, dark).
• Spacing: custom spacing keys like spacing.gutter and spacing.container for comfortable layout rhythm.
• Radius & Shadow: extended borderRadius and boxShadow for consistent corners and glow accents.
• Motion: framer-motion for micro-interactions, with prefers-reduced-motion respected in components.

Dark/Light theme:

• Tailwind darkMode: "class" is enabled. We toggle the dark class on the root element.
• A simple theme toggle button lives in client/src/components/Navigation.js and persists choice in localStorage.
• Initial light theme colors are scaffolded in client/src/index.css. Extend further as needed.

Migrations

After introducing the author field to Project model, you can backfill existing documents:

npm run migrate:backfill-project-authors

The script prefers an admin user as author, falling back to the first user found.

Contributing

Contributions are welcome! Please fork this repository, make your changes, and submit a pull request.

---

Feel free to modify this template to better suit your project and any specific details you want to include. Let me know if there's anything more you'd like to add!