A full-stack photo storage and sharing application built using React, Node.js, MySQL, and styled with Tailwind CSS. Photopia allows users to securely upload, store, and share their photos with a clean and modern user interface.

Rehan Feroz Sayyed

• User authentication (Login/Registration).
• Secure JWT authentication.
• Upload photos to the platform.
• Simple, responsive UI built with Tailwind CSS.
• Dark mode for enhanced user experience.

Photopia/
│
├── user-backend/                      # Backend code
│   ├── config/                        # Database configuration
│   │   └── db.js                      # MySQL database setup
│   ├── controllers/                   # Backend logic for authentication and file uploads
│   │   └── fileController.js          # Logic for handling file uploads
│   ├── models/                        # Models for user data and file storage
│   │   └── User.js                    # User model for authentication
│   ├── routes/                        # API routes for user management and file uploads
│   │   └── fileRoutes.js              # Routes for file upload functionality
│   │   └── jwtMiddleware.js           # Middleware to protect routes with JWT authentication
│   │   └── login.js                   # Login route
│   │   └── register.js                # Registration route
│   │   └── User.js                    # User API routes
│   ├── index.js                       # Entry point for the backend
│   ├── package.json                   # Backend dependencies and scripts
│   └── .env                           # Environment variables for the backend
│   └── database_setup.sql             # SQL Queries for the Database  
│
├── user-frontend/                     # Frontend code
│   ├── src/                           # React source code
│   │   ├── components/                # React components (Navbar, Footer, FileUpload, etc.)
│   │   ├── pages/                     # Pages for Home, Login, Register, etc.
│   │   ├── utils/                     # Helper functions (API calls)
│   │   ├── main.jsx                   # React entry point
│   │   ├── App.jsx                    # Main application component
│   │   └── index.css                  # Global styles
│   ├── tailwind.config.js             # Tailwind CSS configuration
│   ├── package.json                   # Frontend dependencies and scripts
│   └── vite.config.js                 # Vite configuration
│   ├── .env                           # Environment variables for the frontend
│   ├── index.html                     # HTML template for the frontend
│
├── README.md                          # Documentation for the project
└── LICENSE                            # License file

Follow these steps to run the project locally:

To set up the database for the project, you can run the provided SQL script. This will create the necessary tables (users and user_files) for the application.

1. Download the database_setup.sql file from the repository.
2. Connect to your MySQL database.
3. Run the following commands in your MySQL client:

-- Create the database
CREATE DATABASE user_auth_system;

-- Use the database
USE user_auth_system;

-- Create the users table
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create the user_files table
CREATE TABLE user_files (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL,
    file_path VARCHAR(255) NOT NULL,
    uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

4. After running the above SQL commands, your database schema will be set up and ready to use with the application.

1. Navigate to the user-backend/ directory:

   cd user-backend

2. Install dependencies:

   npm install

3. Create a .env file in the user-backend/ directory and add:

   JWT_SECRET = your-secret-jwt-token
   DB_HOST= your-localhost (e.g., localhost)
   DB_USER= your-database-user (e.g., root)
   DB_PASSWORD= your-database-password
   DB_NAME= your-database-name

4. Start the backend server:

   npm start

1. Navigate to the user-frontend/ directory:

   cd user-frontend

2. Install dependencies:

   npm install

3. Create a .env file in the user-frontend/ directory and add:

   VITE_API_URL='http://localhost:5000'

4. Start the frontend development server:

   npm run dev

• React
• Tailwind CSS
• Vite
• Axios

• Node.js
• Express.js
• MySQL (using Sequelize ORM)
• JWT (JSON Web Tokens for authentication)

1. Start the backend server (refer to Setup > Backend).
2. Start the frontend server (refer to Setup > Frontend).
3. Open http://localhost:5173 in your browser to access the app.

For testing, offline usage, you can use the following credentials:

• Email: [email protected]
• Password: 1234

Minimalistic and user-friendly login page.

Easy registration form to create a new account.

A minimalistic UI to upload, store, and manage your photos.

The application is hosted on Vercel (Frontend). However, the backend is not hosted. To access the application, use the following default credentials:

• Email: [email protected]
• Password: 1234

You can view the application here.

If you want to contribute to this project, follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes and commit (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature-branch).
5. Create a new Pull Request.

This project is licensed under the MIT License. See the LICENSE file for details.

For any questions or issues, please reach out to:

• Email: [email protected]
• GitHub: Rehan Sayyed