Hamada Abdelaal

.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

README.md

@@ -1,35 +1,106 @@
-# Authentication Challenge
+# CineNote
 
-## Learning Objectives
+CineNote is a simple full-stack web application that allows users to create an account, record their favorite movies, and manage their movie list. With a simple and intuitive interface, users can easily add movie titles, descriptions, and run times, as well as delete movies they no longer want to keep track of. You can visit the live version of CineNote [here](https://cinenote.netlify.app/).
 
-- Use a token-based approach to authorise access to API resources
-- Use a hashing library to encrypt sensitive information
-- Build a front-end application that interacts with a bearer-auth protected API
+![My Project Home Page](./assets/home-page.png)
 
-## Introduction
+## Note
 
-You are tasked with building a small frontend application containing 3 forms and a list. There is a screenshot at the
-bottom of this document that gives you an idea of what to aim for. As you'll be able to see, it doesn't have to *look*
-good so don't spend time on styling!
+For deployment purposes, this repository has been divided into two separate repositories:
 
-The flow of the application you build looks like this:
+- [CineNote Client Repo](https://github.com/Hamada-AB/cinenote-client)
+- [CineNote Server Repo](https://github.com/Hamada-AB/cinenote-server)
 
-1. A user fills in the register form to create their account with a hashed password
-2. The user fills in the login form to get a bearer token
-3. The user can then create movies once they have a valid token
-4. The list of displayed movies will update as a user creates them
+## Overview
 
-## Requirements
+CineNote is designed to be a personal movie address book where users can log and manage their favorite movies. This application is perfect for movie enthusiasts who want to keep a record of movies they've watched or plan to watch in the future.
 
-1. Both your backend _and_ your frontend must exist in this repo. We should be able to run them both together with a single command.
-2. Must use React, Express and an SQL database. Everything else is fair game.
-3. Good luck, have fun!
+## Features
 
-## Extension
+- **User Authentication**: Users can create an account (signup) and log in securely using JWT and bcrypt for authentication.
+- **Movie Management**: Users can add movies to their list by entering the title, description, and run time. Movies can also be deleted if they are no longer needed.
+- **Design**: The app is built with plain CSS.
 
-1. Create an admin dashboard where admins can view and delete users.
-2. Introduce a second type of auth. It should be a second option to the user, not a replacement for the original.
+## Technologies Used
 
-## Example solution
+### Frontend
 
-![](./assets/example_solution.png)
+- **HTML**
+- **CSS**
+- **JavaScript**
+- **React**
+
+### Backend
+
+- **Express.js**: For building the RESTful API
+- **Prisma**: As the ORM for database management
+- **PostgreSQL**: For the relational database
+- **JWT (JSON Web Tokens)**: For secure user authentication
+- **bcrypt**: For hashing passwords
+
+## Installation
+
+### ⚠️ Important: Fork Before You Clone
+
+### Prerequisites
+
+- Node.js and npm installed on your machine.
+
+### Steps
+
+1. **Fork the repository**:
+
+   - Click the "Fork" button at the top right corner of the repository page to create your own copy of the repository.
+
+2. **Clone the repository**:
+
+   - Clone the forked repository to your local machine:
+
+   ```bash
+   git clone <your-forked-repository-url>
+
+   ```
+
+3. **Navigate to the project directory.**
+
+4. **Install dependencies:**
+
+   ```bash
+   npm install
+
+   ```
+
+5. **Set Up Environment Variables:**
+
+   ```bash
+   # In .env file
+   DATABASE_URL=your_postgresql_database_url
+   JWT_SECRET=your_jwt_secret_key
+
+   ```
+
+6. **Run the database migrations:**
+
+   ```bash
+   npx prisma migrate deploy
+
+   ```
+
+7. **Run the Application:**
+
+   - Server
+
+   ```bash
+   npm start
+
+   ```
+
+   - Client
+
+   ```bash
+   npm run dev
+   ```
+
+## Contact
+
+For any questions or feedback, please contact [Hamada](https://hmad.netlify.app/).

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./assets/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CineNote</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200