Project Description - Key Features - Tech Stack
This project is diving deeper into practicing the DOM, Web Storage, and Fetch APIs. The project works with real-world APIs that return data. The project utilizes modern web technologies and best practices in full-stack development to deliver a seamless user experience.🎈😀
This project Movie diary / Pokedex including:
- 📝 Option 1: Movie Diary using TMDB API
Description: Create a movie diary using the TMDB API.
Requirements:
Homepage:
Retrieve and display a list of popular movies from TMDB API. Include a search bar at the top. On submitting a search, display a dialog with the search results or feedback. Each movie should display an image, name, and relevant info as a card. Include a button to add the movie to favorites. Add the movie to an array of objects in localStorage.
Journal Page: Retrieve and display the list of favorite movies from localStorage. Each movie should be rendered with an image, name, and relevant info. Include a button to add personal notes to each movie. Save these notes to the corresponding object in localStorage.
Navigation: Create a navbar in both pages to navigate back and forth between the homepage and the journal page.
- 📝 Option 2: Pokedex Diary using Pokemon API
Description: Create a pokedex diary using the Pokemon API.
Requirements:
Homepage:
Retrieve and display a list of Pokemon from the Pokemon API. Include a search bar at the top. On submitting a search, display a dialog with the search results or feedback. At the time of writing, the Pokemon API does not offer a search endpoint, but you can try to retrieve a Pokemon by name or numerical ID! Factor this into your logic. Each Pokemon should display an image, name, and relevant stats. Include a button to add the Pokemon to favorites. Add the Pokemon to an array of objects in localStorage.
Journal Page: Retrieve and display the list of favorite Pokemon from localStorage. Each Pokemon should be rendered with an image, name, and relevant stats. Include a button to add personal notes to each Pokemon. Save these notes to the corresponding object in localStorage.
Navigation: Create a navbar in both pages to navigate back and forth between the homepage and the journal page.
- Frontend: Tailwind CSS, Fetch APIs, Web Storage , DOM,
- Backend:
- Cloud & DevOps:
- Other:
- TMDB API Documentation
- Pokemon API Documentation
- TailwindCSS Documentation
- WBS Playground: DOM API
- WBS Playground: Web Storage
- WBS Playground: Fetch