Skip to content

MERN version of Filmaster, a Responsive Modern UI/UX Movie Catalog Application using the MERN Stack, TypeScript, Tailwind, Firebase Hosting and SwaggerUI.

Notifications You must be signed in to change notification settings

diegov05/filmasterV3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Filmaster (MERN Version)

MERN version of Filmaster, a Responsive Modern UI/UX Movie Catalog Application using the MERN Stack, TypeScript, Tailwind, Heroku Hosting and SwaggerUI and PostgreSQL.

Filmaster

Features:

  • Browse a vast collection of movies with rich details and images.
  • Search for movies by title, genre, or cast members.
  • View movie details including synopsis, release date, duration, and rating.
  • Mark movies as favorites for easy access.
  • Create personalized watchlists and add movies to them.
  • Rate and review movies.
  • Responsive design for seamless usage across devices.
  • Dark mode/light mode themes for comfortable viewing.

Technologies used:

Frontend:

  • React (TypeScript)
  • Tailwind CSS

Backend:

  • Node.js
  • Express.js
  • MongoDB
  • TypeScript
  • Swagger UI

Deployment:

  • Firebase Hosting

Installation:

To run the Filmaster app locally, follow these steps:

  1. Clone the repository: git clone https://github.com/your-username/filmaster-mern.git

  2. Navigate to the project directory: cd filmaster-mern

  3. Install the dependencies for the frontend:

  4. Access the Filmaster app in your browser at http://localhost:3000.

Usage:

Once the app is running, you can perform the following actions:

  1. Browse the collection of movies by scrolling through the movie catalog.
  2. Use the search bar to find movies based on title, genre, or cast members.
  3. Click on a movie to view its details, including synopsis, release date, duration, and rating.
  4. Add movies to your favorites list for quick access.
  5. Create personalized watchlists and add movies to them for later viewing.
  6. Rate and review movies to share your opinions and recommendations.
  7. Toggle between dark mode and light mode for a comfortable viewing experience.

API Documentation:

The backend of Filmaster provides a RESTful API with Swagger UI documentation. You can access the API documentation at http://localhost:5000/api-docs once the backend server is running.

Deployment:

To deploy the Filmaster app, follow these steps:

  1. Set up a Firebase project and enable Firebase Hosting.
  2. Build the frontend: cd frontend && npm run build
  3. Deploy the frontend to Firebase Hosting: firebase deploy --only hosting
  4. Update the Firebase configuration in the frontend production build files.
  5. Deploy the backend to a server or hosting platform of your choice.
  6. Update the backend configuration with the appropriate URLs and credentials.

Roadmap:

The Filmaster app is continuously evolving, and the following features are planned for future updates:

  • User authentication and personalized profiles.
  • Recommendations based on user preferences and viewing history.
  • Integration with external movie APIs to fetch real-time data.
  • Social features to follow other users and discover their movie collections.
  • Advanced search filters for refining movie searches.
  • Integration with third-party platforms for streaming availability information.

Please note that the app is a work in progress and may have some limitations or bugs. Your feedback and contributions are highly appreciated.

Feel free to visit the live preview of the Firebase Version of the Filmaster app hosted on Firebase at Filmaster Preview.

About

MERN version of Filmaster, a Responsive Modern UI/UX Movie Catalog Application using the MERN Stack, TypeScript, Tailwind, Firebase Hosting and SwaggerUI.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages