A nature-inspired movie website
Version: v1.0.0-alpha
Author: Nguyen Hoang Long
Email: nhlong2706@gmail.com
View Demo
·
Report Bug
·
Request Feature
Official website: https://firmedia.site
Table of Contents
My interest in building streaming websites led me to design and develop a comprehensive movie website. I gained knowledge about server architecture, CRUD operations using Restful APIs with Express, and authentication through JSON Web Tokens (JWT).
Leveraging modern technologies like Vite and TypeScript, I streamlined development processes and ensured robust code quality. Exploring state management solutions such as Jotai and Zustand further enriched my skill set. Successfully deploying the movie website on the internet marked a significant achievement at the very beginning of my career.
March - May 2023
- User signs up/ signs in with credentials
- User edits profile information: Username, email, image, password and may deactivate account
- User browses recommended (Trending, Up coming, Airing now, Top rated, Most popular) media in Home page
- User searches for media by: keyword, filter options
- User views media details: overview, trailers, genres, similar media, etc.
- User adds media to list based on: Favorite, Is Watching, Plan to Watch, Completed, Dropped.
- User rates media
- User comments or removes their comments for a media
The Movie Database API. (refer https://developer.themoviedb.org/docs/getting-started)
- Client: React/TS + Vite, Tailwind, Jotai, Zustand
- Server: JWT-based auth, Express + Restful API (zod), mongoose/MongoDB
- Deploy: Onrender, Railway.app
- Because this is an isolated monorepo which contains both the client and the server, you need to clone the repo and individually install the packet.json files of each directory ./client and ./server.
git clone https://github.com/nhlong27/movieSite
- Install NPM packages
cd ./client && npm install *** (cd ./server && npm i)
- Default hosts are render.com and railway.app. Create your own accounts and add environment variables (locally or on your hosts)
- for Client: VITE_TMDB_API_KEY (from your tmdb account), VITE_SERVER (your server address)
- for Server: PORT (your server port), CLIENT (your client address), MONGOUSER('mongo'), MONGOHOST, MONGOPASSWORD, MONGOPORT, DOMAIN(* wildcard domain for setting cookies). As for authentication with JWT. Create your own PUBLIC_KEY, PRIVATE_KEY with openSSL (you can download it here: https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/openssl-for-windows/openssl-0.9.8k_X64.zip) (refer https://gist.github.com/Hakky54/b30418b25215ad7d18f978bc0b448d81 for useful commands)
- Then if locally run the scripts for both directories
npm run dev
If you have any troubles please either create an issue or email me. Or message me here: (link to be added)
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
See the open issues for a full list of proposed features (and known issues).