Project
WatchMe
WatchMe is a React and TypeScript movie catalog that lists films by genre, with a sidebar for switching between genres.
Stack
- React
- TypeScript
- Webpack
- Babel
- Sass
- Axios
- JSON Server
About this project
Genres and movies are served by a local JSON Server API and fetched with Axios. Choosing a genre in the sidebar loads its movies into the content area as cards with poster, title, rating, and runtime.
Features
- Sidebar with genre buttons and icons
- Movie cards with poster, title, rating, and runtime
- Genre-based filtering of the movie list
- Local REST API with JSON Server
Purpose
- Add TypeScript to a React project
- Configure Webpack and Babel by hand instead of using a starter
- Organize components and styles into a clear structure
Scope & Limitations
- Frontend with a local mock API; no production backend
- Read-only catalog without search or user accounts
Tech Stack
- Frontend: React 17, TypeScript
- Build: Webpack, Babel
- Styles: Sass
- Data: Axios and JSON Server
Notes
- Source code: https://github.com/Felipeact/WatchMe