frontend-guy/movies-explorer-frontend

Frontend for Movies Explorer App: A search and bookmark tool for movies, built using React, Node, Express.js, and MongoDB, hosted on Yandex Cloud.

Movie Explorer 🎬

📜 Introduction

Movie Explorer is a MERN stack application that fetches and displays movies from the Movies API. After the users are authenticated, can bookmark movies and view on their profile page. This app was created with Create-React-App. The development process was done in 2-week agile sprints. The back-end is built in Node/Express.js and served on Yandex Cloud server. User data, credentials, and saved movies are stored in MongoDB.

🌟 Key Features

• 🚀 Express Server: The foundational setup and infrastructure.
• 💽 Database Connection: Integrated with API resources, schemas, and models.
• 🔐 Security: Robust logging, authentication, and authorization systems.
• ☁ Deployment: The backend is airborne on Yandex Cloud.
• ⚛ React Components: Beautifully designed and ported markup to React.
• 🧑‍💻 User Features: Registration, login, profile editing, and the logic to handle saved movies.
• 🔄 API Interaction: Asynchronous GET and POST requests seamlessly integrate with the API.
• 🔒 User States: Distinguishing between authorized and unauthorized states, managing movie saving within profiles.
• 🎞 Movie Filtering: Client-side filtering of received movie data for optimized user experience.

🛠 Stack & Tools

• Frontend: HTML, CSS, React
• Backend: Express, MongoDB, NodeJS, API, Nginx
• Authentication: JWT
• Testing: Postman

🔗 Links

• 🎨 Design on Figma
• 🌍 Frontend
• 🔧 Backend
• 📦 Backend Repository on GitHub

💻 Setup & Project Start

If you wish to run this project locally, follow these steps:

1. Clone the repository:

git clone https://github.com/FrontEnd-Guy/movies-explorer-frontend.git

2. **Navigate to the project directory:

cd movies-explorer-frontend

3. **Install the dependencies:

npm install

4. **Start the development server:

npm start

Open http://localhost:3000 in your browser to view the application.