This is Tracket, an application whose main goal is to give users the flexibility to store tasks. You can create your own account by providing your email, password, first name, and last name. Using these credentials, you can sign in to the application. You are able to add new projects which store tasks. Each task consists of multiple properties like a name or description. Of course, just like any other todo app, this one allows you to check off completed tasks. You may also update your own profile, provide your own username, and some details about yourself.
Check out the live demo of this application, simply click this link link to application!
You can create your own account using your email and password, but if you want, you can also use the user account, made especially for this purpose, so you can easily see what the application looks like. Just go to the login section and fill in the form using this data.
email: [email protected]
password: 12345678
Try to create your own projects and add some tasks. Please feel free to experiment with all of the application's features.
This is how the application's stack looks like. The whole application is written using Typescript.
The front end of this application was made with React using the Typescript programming language. The user data on the client side is stored using a cache provided by Apollo Client. The user may be authenticated using JSON web tokens stored in the Redux context. The cache contains the user's data, projects, tasks, and data connected with UI. Errors and loading states are maintained by Apollo Client library. The application UI was made using Tailwind CSS. Dates are displayed using Moment.js.
React
Typescript
Apollo Client
React Router
Tailwind CSS
Framer motion
React Hook Form
Sass
Joi
React toastify
Lottie
Moment.js
The back end of this application was made using Apollo Server using the Typescript programming language. The whole application's data is stored in the MongoDB database. The connection to the database is provided by Prisma. Because of the fact that the application uses GraphQL, there is a need to generate types for backend services. This task is done using Nexus. The user may be authenticated using JWT tokens sent with the Authentication header. At the moment, only email and password authentication is available, but in the future I'm going to add more authentication methods.
Apollo Server
GraphQL
MongoDB
Prisma
Nexus
JWT
This application is some sort of todo application, where you can create your own projects that contain tasks. Every project and task might be updated or deleted after its creation. Each task might be marked as done or otherwise.
You are also able to edit and delete particular projects and tasks. Deleting a project that contains tasks results in deleting all the tasks as well.
You are also able to update you profile details and add something about yourself, all the changes are immediately visible.
There is also a client and server side validation, so whenever you provide invalid data, you will be informed about that
| Login | Sign up |
|---|---|
 |
 |
To start using this application you have to clone or download this repository using the following command
git clone https://github.com/matikotyla/tracket.git
next you have to install all required modules in the frontend and backend directories using
cd frontend
npm ci
cd backend
npm ci
Once it's done you need to provide two .env files, in the frontned and backend directories. Place the first one in the backend directory and copy past the following content
NODE_ENV=development
DATABASE_URL=<YOUR-MONGO-DB-URL>
HEROKU_API_KEY=<HEROKU-API-KEY>
the HEROKU_API_KEY is not required as it is used only during the CI/CD process after pushing your changes to the main branch. Place the second one in the frontend directory and copy paste the following content
REACT_APP_URL=http://localhost:4000/ NETLIFY_SITE_ID= NETLIFY_AUTH_TOKEN=
the NETLIFY_SITE_ID and NETLIFY_AUTH_TOKEN environment variables are only used during the CI/CD proces, hence they are not needed to start the application.
Once all of the above is done, we need to run the frontend side as well as the backend side of the application. Do it using the following commands
cd frontend
npm start
cd backend
npm run server
The first command starts the frotend part of the application, and the second one starts the backend part of the application.
The application was designed using Figma
