This is a web-based bookmarks and to-do list app created using React and styled with Chakra UI. The app allows users to save and organize bookmarks, as well as create and manage to-do lists.
Bookmarks
Users can add a bookmark by entering the name and URL of the website.
Users can edit or delete existing bookmarks.
Users can add a task by entering the task name and due date.
Users can mark tasks as complete once they are finished.
Users can edit or delete existing tasks.
To use the bookmarks and to-do app, follow these steps:
-
Clone the repository to your local machine.
-
Run npm install to install the necessary dependencies.
-
Run npm start to start the app.
The app will open in your web browser.
- React - JavaScript library used for building the app
- Chakra UI - React UI framework used for app styling
The main folder for the app's source code
Folder containing React components used in the app
- Bookmarks.js - Parent component for displaying individual bookmarks
- BookmarkList.js - component for displaying a list of bookmarks
- BookmarkForm.js - component for adding or editing bookmarks
- Bookmark.js - is for displaying the image for the website the link is added from.
- ToDo.js - component for displaying individual to-do list items
- Greeting.js diaplays a greeting that allows the usert to add their name for personalisation purposes.
- Time - is a component that displaysthe current date and time of where the user is located.
- ToDo.js - component for displaying a list of to-do list items and also for adding or editing to-do list items pages - folder containing the different pages of the app
- App.js - main component that renders the app's pages and components
- index.js - main file that renders the app into the DOM
Acknowledgments
- React: JavaScript library used for building the app
- Chakra UI: React UI framework used for app styling
- Render: to deploy the app