WhatsFav

WhatsFav is a web application designed to help users select their favorite films based on various filters. The project utilizes the MERN stack (MongoDB, Express, React, Node.js) to provide a seamless and interactive experience.

UPDATE (9 AUGUST 2024)

- Dark Theme Added
- Main Page Video is now fullscreen

UPDATE (27 JULY 2024)

• The user can choose the background colors

// bg-stone-950
// bg-amber-950
// bg-yellow-900
// bg-indigo-950
// DEFAULT: bg-blue-950

UPDATE (24 JULY 2024)

• The background color has been changed and used more of a color palette
• Created a new filter design with the help of Frame-Motion
• The Mini Search Bar design has been changed
• A bug in the filter has been fixed

Update.mp4

Table of Contents

• Features
• Technologies Used
• Getting Started
• Installation
• Usage
• Project Structure
• API Endpoints
• Contributing
• License
• Contact

IMAGES AND VIDEO

CHECK

• Login (added)
• Sign up (added)
• Logout (added)
• Update Profile (added)
• Contact Menu (added)
• Film Models (added)
• Review Models (added)
• Favorites RTK Query (added)
• Create Category, and make a backend for it (added)
• Comment/Rating Tab
• Movies Collecting (added)
• Create A Filter System Based On The Films Genre (added)
• Create A Filter System Based On the user's filter (added)
• Add Films With Slider
  • FavSlider.jsx (added)
  • All Movies (added)
  • Horror Movies (added)
  • Sad Movies (added)
  • Funny Movies (added)
• Create a dynamic search bar (added)
• Create a state management system for storing favorite films of the user RTK QUERY - BACKEND (added)
• Create A Specific Film Page (added)

Features

• Filter Films: Users can filter films based on their preferences, such as genre, rating, and release date.
• Responsive Design: The application is designed to work seamlessly on both desktop and mobile devices.
• Interactive UI: Built with React, the user interface is dynamic and user-friendly.
• RESTful APIs: The backend is built with Express and Node.js, providing robust APIs for data management.
• Database Management: MongoDB is used to store and manage film data efficiently.

Technologies Used

• Frontend: React, Tailwind CSS
• Backend: Node.js, Express
• Database: MongoDB
• State Management: Redux
• API Requests: RTK Query

.env file

POST=3000
MONGO_URI="mongodb://***********/test"
JWT_SECRET=
NODE_ENV=
// Contact
SERVICE_ID=""
TEMPLATE_ID=""
PUBLIC_KEY=""
// All Images will be here
IMAGE_URL="./frontend/public/images/"

Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

• Node.js and npm installed on your machine
• MongoDB installed and running

Installation

1. Clone the repository:

   git clone https://github.com/Doguhannilt/WhatsFav.git
   cd WhatsFav

2. Install backend dependencies:

   cd backend
   npm install

3. Install frontend dependencies:

   cd ../frontend
   npm install

Usage

1. Start the backend server:

   cd backend
   npm start

2. Start the frontend development server:

   cd ../frontend
   npm start

3. Access the application: Open your browser and navigate to http://localhost:3000

Project Structure

WhatsFav/
├── backend/
│   ├── config/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   └── server.js
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── redux/
│   │   ├── App.js
│   │   └── index.js
└── README.md

API Endpoints

Film Routes

• GET /api/films: Retrieve all films
• GET /api/films/:id: Retrieve a single film by ID
• POST /api/films: Add a new film
• PUT /api/films/:id: Update a film by ID
• DELETE /api/films/:id: Delete a film by ID

User Routes

• GET /api/users: Retrieve all users
• GET /api/users/:id: Retrieve a single user by ID
• POST /api/users: Register a new user
• PUT /api/users/:id: Update a user by ID
• DELETE /api/users/:id: Delete a user by ID

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
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

Thanks

Thanks my buddy for collecting the data: Photographer M.Ali Van

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Doguhannilt - GitHub Profile

Project Link: https://github.com/Doguhannilt/WhatsFav