Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shubhrajps/react-task-manager-and-movies
A repository hosting a TodoList and Movies app, both built using React, for efficient task management and movie exploration.
https://github.com/shubhrajps/react-task-manager-and-movies
context-api framer framer-motion localstorage movies react tailwind todo
Last synced: 4 days ago
JSON representation
A repository hosting a TodoList and Movies app, both built using React, for efficient task management and movie exploration.
- Host: GitHub
- URL: https://github.com/shubhrajps/react-task-manager-and-movies
- Owner: shubhrajps
- Created: 2024-08-21T11:52:41.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-24T12:04:57.000Z (3 months ago)
- Last Synced: 2024-10-11T10:42:05.967Z (28 days ago)
- Topics: context-api, framer, framer-motion, localstorage, movies, react, tailwind, todo
- Language: JavaScript
- Homepage: https://www.github.com/shubhrajps/react-task-manager-and-movies
- Size: 166 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 1. To-Do List App
This is a simple To-Do List application built with React, Tailwind CSS, and Framer Motion. The app allows users to add, complete, and delete tasks, with smooth animations and a clean, responsive UI.
### Features
- **Add Tasks:** Easily add new tasks to your to-do list.
- **Complete Tasks:** Click on a task to mark it as completed.
- **Delete Tasks:** Remove tasks from the list using a bin icon.
- **Smooth Animations:** The app uses Framer Motion for smooth UI animations.
- **Responsive Design:** Tailwind CSS ensures the app looks great on all devices.
### Tech Stack
- **React:** JavaScript library for building user interfaces.
- **Tailwind CSS:** Utility-first CSS framework for rapid UI development.
- **Framer Motion:** A library for animations and transitions in React.
- **Context API:** Used for managing the global state of the to-do list.
### Screenshot
# 2. Movie App
A movie browsing application similar to IMDb, built with React, Tailwind CSS, Framer Motion, and the TMDB API. This standalone application allows users to view popular movies, add them to a watchlist, and search through their saved movies.
### Features
- **Home Page:** Displays a grid of 30 popular movies fetched from the TMDB API. Each movie is displayed with its thumbnail, title, and an "Add to Watchlist" button.
- **Watchlist Page:** Users can view and manage their saved movies. The watchlist includes a search feature and allows users to remove movies from the list.
- **Responsive UI:** The application is styled using Tailwind CSS, ensuring a responsive and visually appealing design.
- **Animations:** Framer Motion is used to add smooth animations to the UI elements.
### Technologies Used
- **React:** For building the user interface and managing component state.
- **React Context API:** For managing global state (watchlist) across components.
- **Tailwind CSS:** For styling the application with utility-first CSS.
- **Framer Motion:** For adding animations to the UI.
- **TMDB API:** For fetching movie data.
- **LocalStorage:** For persisting the watchlist data between sessions.
### Screenshots
