Task-App

A task app focus on simplicity. Built with ReactJS, Next.JS, Styled Components and Typescript.

Features  |   Technologies  |   Installation

⭐ Features

(Back to top)

This is a complete task app that focus on simplicity. You can create your account, and start following your tasks.

Some key features are:

• Functional application with Next.JS and Server Side Rendering.
• Front-end state management done with Context API.
• Authentication system made with JWT.
• UI built with Styled Components.
• Mobile first.
• Light and Dark theme.
• Forms optimized and validated by React Hook Form and Yup.
• Custom alerts with React Hot Toast.
• Avatar upload for your user.
• Email service for welcome and goodbye messages.

The application is built using ReactJS with Next.JS framework and SSR feature. Data is provided by a proprietary API, in this repository. The user interface is built with Styled Components and is mobile first. The entire codebase is written using Typescript.

Checkout the API Live version hosted on:

You also can check the complete Application Live version hosted on:

The email service I used suspends the KEY if don't use it regularly, so if you don't get any emails it's because of that.

⌨️ Technologies

(Back to top)

This is what I used and learned with this project:

• ReactJS
• Next.JS
• Styled Components
• JWT
• Nookies
• React Hook Form
• Yup
• React Hot Toast
• Axios
• Eslint
• Typescript

🖱️ Installation

(Back to top)

To use this project, first you need NodeJS and the API running in your device, then you can follow the commands below:

# Clone this repository
git clone https://github.com/areasflavio/task-app.git

# Go into the repository
cd task-app

# Install dependencies for the application
yarn install

# Copy the .env.example to the .env file and inject your credentials
cp .env.example .env

# To start the development server, run the following command
yarn dev

👨‍💻 Author

(Back to top)

Build by Flávio Arêas 👋 Get in touch!