Focus ⏰
A streamlined, user-friendly study-aid designed to bring focus to students’ messy lives
This app was designed for use in classroom settings with younger students who struggled with efficient time management skills. As an easy-to-use and self-contained web application, Focus allows users to customize a study duration and track remaining time so that they can effectively stay on top of their studies. Built with React.js, Redux, and TypeScript.
Click the link to see the app in action ---> https://focus-101.web.app/
Features 🤖
- customizable study durations to suit personal concentration patterns
- dynamic motivational quotes fetched using Reddit's RESTful API
Technologies and Frameworks 💻
What I Learnt 📚
- How to leverage the power of CSS-in-JS via styled-components to develop component-level styles in my application.
- The essentials of React, including differences between functional components and class components, and the use of effect hooks for lifecycle methods inside functional components.
- Successful management of component states using the Redux store, action handlers, and reducer methods.
- Asynchronous function usage in JavaScript, such as handling pending or resolved promises to retrieve data from RESTful APIs like ssnoowrap.
- How to use TypeScript to add static type checking to my code, improve readability, and catch compile time errors.
- Code formatting best practices to prevent merge conflicts and fix problems quickly using Prettier and ESLint.
Bootstrapped with Create React App.
Hosted on Firebase