d4nielj / t4sks-ravn

IT T4SKS

A web single page app to manage projects through specific goals set by project.

Features:

• Fetch list of tasks from Apollo database
• Create new tasks to the database
• Mantain important data fetched in state
• Update data from tasks after mutations

Live Demo

• Deployed to Netlify: Live Demo

Built With

• HTML, CSS, JavaScript
• React
• NextJS
• React Query
• GraphQL Request
• TailwindCSS

Getting Started

Development

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Bundle project

• npm run build

Linters

• npm run lint

Learn More

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.

Author

👤 Daniel Jaramillo

• GitHub: @d4nielj
• Twitter: @d4niel_jm
• LinkedIn: d4nielj

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

This is a Next.js project bootstrapped with create-next-app.

t4sks-ravn's Issues

1. Initial setup

This phase is all about your project's initial configuration, we’d like to see how you envision the project, this includes the folders structure, naming conventions, styles, routing, etc.

• Folder structure
• Routing configuration (You can add a basic NotFound and Error page if you’d like to)
• Styles solution
• Formatters / Linters (optional)
• Error boundary (optional)
• Github actions (optional)

Bonus points

If you’d like to continue working on your project or want to add some cool stuff you can pick one of the extra points listed here. If there is something you added that you want to mention, please do it in the README file, please feel free to use any libraries of your choice.

1. Add a drag and drop to move the task from one column to another and update its status
2. Show the total count of tasks by column
3. Change the layout from columns to list
4. Change the color of the date when it has delay (green: on time, yellow: less than 2 dates, red: date is older than current date)
5. Add a timer to the estimated time
6. Add cool animations for when a new task is added to the board

3. Connect to the api

Now that we have the UI for the dashboard, we’ll connect to the api in order to pull the tasks information. Here you have a list of the basic functionalities we expect, however feel free to add additional things that could improve the UI, performance, animations, etc.

Get

• Use the tasks query to pull all the available tasks
• Show loading indicator when necessary (eg: while fetching data, you can use spinners or skeletons)
• Indicate when a query has failed
• Show an empty state when there are no results found

Create

• The create action should be the + red icon and it should show a create task modal when clicked
• Use the createTask mutation to add a new task in the dashboard
• Add error handlers for when the createTask mutation fails

4. Add the Update and Delete mutations

Now let’s extend the app functionalities by adding the update and delete features for cards, this actions should be show when the user clicks on the options icon (3 dots in the top right corner)

Update

• Use the updateTask mutation to edit the card information,
• it should allow the user to edit the following information:due datenamepositionstatustagsestimated time
• Show a modal with all the editable fields
• Show a confirm and cancel buttons to confirm edition or cancel the action
• Show a notification to indicate if the request succeed or failed

Delete

• Use the deleteTask mutation in order to delete a task by id
• Show a confirmation message before deleting with confirm and delete buttons
• Show a notification to indicate if the request succeed or failed

5. Add task to the getTasks query

The get tasks query has some optional parameters, if one of these is sent in the request it should return only the data matching the filters added

• Add the logic to send filters the following optional filter in the request:NameDueDateOwnerIdStatusTagsEstimatedTime
• If one or the combination of two or more filters doesn’t return information show an empty results component in the UI

6. Show the user information

Create a new route settings in which you can show all the user information, use the profile query in order to pull the data

• Show the following information:
• FullName
• EmailTypeCreatedAtUpdateAt

2. Create the dashboard page

We don’t need to add functionality to any of the components at this point, this should be only UI elements

Sidebar

• Add the logo at the top
• Add the list of menu navigation items (most of them can navigate to a sample page)
• Add the active state of the item

Header

• Add the profile image (avatar)
• Add the notification icon
• Add the search icon

Main content

• Show the list and grid view icons (just ui elements without functionality)
• Add the “+” plus icon
• Add the tasks columns (backlog, cancelled, done, in progress, todo)

Task Card

Each card should be placed within the column according to the task status, please add the following information:

• Name
• Tags (Android, React, etc)
• Due date
• Estimated time
• User avatar (use a fake image or placeholder if not provided, eg: [https://unsplash.com/](https://unsplash.com/) or faker: https://www.npmjs.com/package/faker)
• Show the options icon (3 dots in the top right corner)