Attention dEfficient

Overview:

• Attention dEfficient is a productivity manager designed to provide an organized, focus promoting environment to streamline user workflow. This web app is designed for the busy professional, a student with deadlines, freelancer managing multiple projects, or anyone that could benefit from a time management and goal oriented efficiency enhancer.

  Key Features include:

• Organized task tracking: Users have easy access to create, edit, and delete to-do lists with status trackers for effortless organization and goal orientation.
• Time management features: Timers are provided for pomodoro style time management.
• Engaging user interface: User interface is optimized for user experience including sounds and animations that keep morale high and encourages continued use, keeping the user organized.

All of your tools in one convenient screen

Create lists

Streamlined to-do item creation

Track status of to-to items

See all items with details in single list view

Tech Stack:

This app uses:

• ReactJS
• Bootstrap
• a react-timer-hook
• a use-sound hook
• and Firebase.

Contributors:

• Tatiana Barga

Links and resources:

• Project Board
• Deployed Project
• ERD
• Wireframe
• Loom walkthrough

How to download/clone/install and run the app:

Topics

• Get Started
• Starting the Project
• Deploying on Netlify

  ---

  Getting Started

  1. Make sure YOUR github account is selected in the dropdown and name your project

  2. Clone your new repo to your local machine

  3. Go to the NEXT section

Starting the Project

1. Create a Firebase project and set up authentication. Use these videos as a refresher if needed.
2. Create a .env file at the root of the project
3. Copy/Paste the contents of the .env.sample file to your newly created .env file.
4. Copy over all of your Firebase values into the .env file.
5. Open the package.json file and change the name property to the name of your application, and author to your name.
6. From your command line, be in the root directory and run npm install OR npm i for short.
7. Next, run npm run prepare. This command sets up husky to track eslint errors on commit that will make your deploy fail on Netlify.
8. Go into the links for the hooks in the Tech Stack provided in the tech stack above and install hooks.
9. To start your application, run npm run dev. THIS IS THE COMMAND YOU WILL USE TO RUN YOUR DEVELOPMENT SERVER FROM NOW ON.
10. Open http://localhost:3000 with your browser.

NOTES:

• If you see the following error, you did not follow all the setup steps correctly and failed to add your Firebase creds. Go back and do that NOW.

Deploying on Netlify

Netlify will automatically detect your project and prepopulate the settings, but should something go wrong and it does not, here are the commands:

• Build Command: npm run build
• Publish directory: .next

Additional Steps to Take on Netlify

• Add Environmental Variables

  • Any Enviromental variables you are using in your .env file should be added to Netlify.
    • Go to Site settings > Build & deploy > Environment > Environment variables and the keys and values there.

• Update Firebase URL Settings

  • In Firebase under Authentication select sign in methods, scroll to Authorized domains. Add your Netlify URL.

Learn More about Next.js

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.