https://github.com/monicaalyssa/popcornpal-client

PopcornPal is a full-stack web application for movie enthusiasts who enjoy reading information about movies.
https://github.com/monicaalyssa/popcornpal-client

javascript react

Last synced: about 9 hours ago
JSON representation

PopcornPal is a full-stack web application for movie enthusiasts who enjoy reading information about movies.

• Host: GitHub
• URL: https://github.com/monicaalyssa/popcornpal-client
• Owner: monicaalyssa
• Created: 2024-07-03T22:53:34.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-11-10T18:23:03.000Z (8 days ago)
• Last Synced: 2024-11-10T18:26:33.336Z (8 days ago)
• Topics: javascript, react
• Language: JavaScript
• Homepage: https://popcornpal.netlify.app/
• Size: 10 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


























PopcornPal




A full-stack web application for movie enthusiasts who enjoy reading information about movies. It allows users to explore a diverse collection of movies, learn about movie directors and genres, and manage favorite movies if registered.







Live Site ·

Case Study ·

API Repo ·

Demo 





## Features

- **Browse Movies:** Browse through a wide collection of movies.

- ~~Search: Search for specific movies by title or genre.~~ [Under Development]

- **Movie Details:** Access information on a movie, including the plot summary and details about the directors.

- **User Registration:** Create an account by providing a username, password, and email address.

- **User Profile Management:** Registered users can modify their profile information.

- **Personalized Experience:** Users can add and remove movies in their "My Favorites" list.

## Technologies & Dependencies

### Frontend

React: The core framework for building dynamic UI components, managing states for elements like movie lists, user favorites, and profiles.

Vanilla CSS: Responsive custom styles created from scratch.

Framer Motion: React library for engaging animations when navigating through movie genres.

### Backend

Node.js: The runtime environment for handling HTTP requests and managing endpoints.

Express.js: A framework for Node.js to handle HTTP requests, define routes, and implement middleware to manage various aspects of the project.

[View API](https://github.com/monicaalyssa/movie-api)

### Database

MongoDB: The database management system for handling the storage and retrieval of data related to movies and users.

Mongoose: Interacts with the MongoDB database to define schemas, validate structures of movie and user documents, and employ query methods to locate matching records.

JWT (JSON Web Token): Generates tokens at user login for secure, stateless authorization.

Passport.js: Middleware for user authentication, integrating strategies for verifying credentials and managing sessions.

Bcrypt: Library for hashing user passwords before storing them in the database for enhanced user security.

### Testing

Postman: Application for testing API endpoints, including authentication, data retrieval, and data submission.

## Demo 

https://github.com/user-attachments/assets/a05b3587-cc6c-41c0-8316-005f812503c4

##

[Back to top](#top)