MovieMuse is a web application that offers users detailed information about movies, including titles, release dates, genres, taglines, overviews, and posters. Users can create accounts, log in securely, and store their favorite movies, watchlists, and personalized preferences. They can mark movies as favorites and add them to their watchlist to keep track of movies they love and intend to watch.
MovieMuse provides personalized movie recommendations based on the favorite movies selected by the user.MovieMuse suggests similar movies that align with the user's taste and preferences. This feature helps users discover new movies that they are likely to enjoy and enhances their movie-watching experience by offering tailored recommendations.
MovieMuse offers a diverse range of movie options, including now showing, upcoming, popular, and top-rated movies. Users can explore detailed information about each movie and conveniently add their favorites to a watchlist for easy access and future viewing.
Client: React, TypeScirpt, Sass,
Server: Node.js, Express, MySQL, JWT
1.Install MovieMuse with npm
cd moviemuse
npm install2.Set environment variables:
VITE_REACT_APP_API_URL=<LOCALPATH>3.Start the React app:
npm run dev http://localhost:8080 GET /api/movies GET /api/users/${id}| Parameter | Type | Description |
|---|---|---|
id |
string |
Required. Id of user to fetch |
POST /api/movies GET /api/users/${id}/watchlist| Parameter | Type | Description |
|---|---|---|
id |
string |
Required. Id of user to fetch |
POST /api/movies/watchlist DELETE /api/movies/${userId}/${movieId}| Parameter | Type | Description |
|---|---|---|
userId |
string |
Required. Id of user to fetch |
| Parameter | Type | Description |
|---|---|---|
movieId |
string |
Required. Id of movie to fetch |
DELETE /api/movies/${userId}/watchlist/${movieId}| Parameter | Type | Description |
|---|---|---|
userId |
string |
Required. Id of user to fetch |
| Parameter | Type | Description |
|---|---|---|
movieId |
string |
Required. Id of movie to fetch |
- User login and signout
- Select favourite movies
- Add movies to watchlist
- Remove movies from favourite or watchlist
- Cross platform
While building this project, I learned the importance of data integration and API usage in creating a comprehensive movie platform. I gained experience in handling user authentication, managing user preferences and lists, and leveraging my own database and external movie databases to provide accurate and up-to-date movie information. Additionally, I developed skills in designing responsive and visually appealing user interfaces to enhance the overall user experience.
During the project, one of the main challenges I faced was the learning curve of TypeScript. Adapting to the static typing and syntax requirements of TypeScript required some adjustment, especially when integrating external libraries and managing data flow between components. To overcome this challenge, I utilized the TypeScript documentation and resources available online to deepen my understanding of the language. I also made use of TypeScript's type inference and gradually added explicit type annotations to my codebase, which helped catch potential errors early on and ensure better code quality. Additionally, leveraging TypeScript's features such as interfaces helped in maintaining consistent and predictable data structures throughout the project. Overall, through perseverance, practice, and continuous learning, I was able to overcome the TypeScript learning curve and effectively utilize its benefits in the project.
