Focus Chum App V1.0

Overview

FocusChum is not just another productivity app – it's your ultimate companion for tackling tasks one at a time.

Table of Contents

• General Info
• Website
• Highlights
• Technologies
• Setup
• Screenshots
• Status
• References
• Acknowledgements

General Info

Focus Chum encourages a simplified approach by allowing you to concentrate on completing one task at a time. Built on React, FocusChum utilizes a robust, component-based architecture for a user-friendly and efficient experience.

Website

🎉 FocusChum App Website 🎉

https://focus-chum.netlify.app/

Highlights

🚀 V1.0 Highlights

• Tackle one task at a time for enhanced focus
• Streamlined interface to eliminate overwhelm
• Stay on track and achieve success seamlessly

Technologies

• ReactJS
• Vite
• Tailwind CSS
• Hero Icons
• JS Confetti

Screenshots

Setup

Setting up a React Project in Visual Studio Code

Prerequisites

• Node.js installed
• npm (Node Package Manager) installed
• Visual Studio Code installed

Setting up a React Project with Vite and Tailwind CSS

1. Open your terminal.
2. Navigate to the directory where you want to create your Focus Chum App.
3. Run the following commands to create a new React app with Vite:

npx create-vite focus-chum-app --template react

5. Change into the project directory:

cd focus-chum-app

Install Tailwind CSS and Hero Icons

1. Install Tailwind CSS and Hero Icons using npm:

npm install tailwindcss heroicons

2. Create a Tailwind CSS configuration file:

npx tailwindcss init -p

3. Import Tailwind CSS in your main styles file (e.g., src/styles/index.css):

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Install JS Confetti

1. Install JS Confetti using npm:

npm install js-confetti

Start the Development Server

In the terminal of Visual Studio Code, run the following command to start the development server:

npm start

This will open your Focus Chum App in a new browser window, and you can start developing your project.

Additional Notes

• Please refer to the documentation for latest installation/configration steps.
• Customize your Tailwind CSS styles in the tailwind.config.js file.

Status

Project Status: Version 1.0 Completed, constantly evolving for next release.

References

🔗 Tech slack

• https://vitejs.dev/guide/
• https://tailwindcss.com/docs/guides/vite
• https://heroicons.com/
• https://github.com/tailwindlabs/heroicons

⚙️ Inspired by

• https://www.youtube.com/watch?v=s84yXvLOoio
• https://github.com/coding-in-public/one-thing-react-app

Acknowledgements

• Big thanks to Chris Pennington for creating this amazing React course!
• Your guidance has been invaluable in helping me improve my skills. Grateful for your dedication and expertise! 🙏🏻🫡