yashsehgal/dashboard-ui

Dashboard UI Frontend using React.js, and CSS/SCSS

dashboard-ui's Issues

Create button components for dashboard usage

Need to create multiple button components for specific use-cases. Such as primary, outlined, text buttons, disabled buttons with 2 different sizes (i.e. Large, small (default)) which can be modified by props as well. The button designs are mentioned here in the Figma file

• A screenshot of how the buttons are looking as of now
  

Design a UI for the dashboard app and its other sub-views.

The dashboard application needs a UI concept in order to get started with the frontend development part. This is the Figma file URL where I am working on the designs and assets part.

(JS-0414) Missing key for the property

Description

A key is a special string attribute you need to include when creating lists of elements because keys help React identify which items have changed, added, or removed. Keys should be given to the elements to give them a stable identity.

Occurrences

There are 2 occurrences of this issue in the repository.

See all occurrences on DeepSource → deepsource.io/gh/yashsehgal/dashboard-ui/issue/JS-0414/occurrences/

Create a date-range-picker component

Need to create a date-range-picker component for new tasks/tickets and to manage deadlines.

• Create a modal component
• Implement new style changes

Create a demo layout of Kanban board

Need to create a layout for the Kanban board on the dashboard view, listing project issues and assignments.

Steps we can complete this entire feature

• Create card components for Issue/Task cards
• Develop a layout for the UI concept of a Kanban board
• Add Draggable/Droppable properties using react-beautiful-dnd module
• Make card component more actionable. User should be able to Add, Delete, Update tasks/issues
• Make a pop-up modal to show more details of a particular task/issue

Create a chat screen layout

Need to create a frontend layout for chatting.

Features to focus on while working on the frontend

• Chat system should be a team-based chat feature with multiple sub-channels feature
• Chat UX should be understandable such as (user should be able to differentiate between sender and receiver's responses)
• Use modular structures and components to implement this UI

Create a modal component to add a new task

Create a pop-up modal to create a new task on the dashboard view. Use react-modal to implement this feature.

Create a logo for GitSpace

Create a logo for GitSpace with branding assets and styles.
Create a pack of images of all possible sizes, layouts, themes, file types and save them on ImageKit.

(JS-0128) Should not have unused variables

Description

Found variables that are declared but not used anywhere.

Occurrences

There is 1 occurrence of this issue in the repository.

See all occurrences on DeepSource → deepsource.io/gh/yashsehgal/dashboard-ui/issue/JS-0128/occurrences/

Create a toast component

Create a toast component for the application UI. The toast component will be having the following properties mentioned below:

• Title of the toast
• supporting description text
• Icon of the toast (identifying the type of toast)

The toast component will be having an animation effect as well

Header component for dashboard-view

Need to create a header for dashboard-ui which will be having account options and other settings options. The design to header component is being referenced in this Figma file

• A screenshot of header-ui is attached below
  

[FEATURE] New project addition feature

⭐ Suggestion

Can create a feature to create a new project entry/card for the dashboard-ui.

• Create a popup-modal form to take new project details and store them in the browser's local storage for future rendering.
• Can also give a "Remove project" feature for deleting project instances.

UI to implement this feature

• Pop-up modal form
• local-storage connectivity and UI rendering
• Deletion modal with action buttons

💻 Use Cases

This will add more functionality to the project and for future usage as well, as there'll be backend connectivity which will make things working properly.

❌ Related Problems

No problems as such, just upgrading the application.

Website: Create a short landing page (static website) for GitSpace

Need to create a short concept website for GitSpace, more like a product website with sections given below.

• Create a landing section (maybe something with some product, UI screenshots, and a tagline)
• About GitSpace section (explain the concept product and how it could help developers and team-mates)
• An early access feature (just for a concept)

Create a tag-component for dashboard application

Create a tag component with functionalities and props which can be used in the dashboard views, cards and other stuff.
The reference to all the tags is present here - https://www.figma.com/file/CuHNU1HavKGn830z0Doqki/dashboard-ui-styles-and-assets?node-id=5%3A3

Update README.md according to Gitspace

Update the README.md module from the default create-react-app one.
Try adding the following section of contents to it

• Title
• Product banner
• Description of the project
• Tech stack
• Problem solved