german-bortoli/brandbastion-cc

[Frontend] Brandbastion code challenge

BrandBastion code challenge

Description

Used Vite+Typescript+React to create the code challenge repository

UI Framework: ShadCDN-UI

• Preview page: https://brandbastion-cc.vercel.app/
• Kanban Board (with estimations and times): https://github.com/users/german-bortoli/projects/3

Installation

Clone this repository and then run the following command in your terminal to configure and install all of the dependencies

Copy and configure the environment variable

cp .env.example .env

Install deps

yarn install

Usage

yarn dev

Testing

Regarding testing I had to use .jsx for now because I was having an issue with tanstack router, it was throwing some errors on build because some typesafe.

Unit tests runs automatically by a GitHub action, but if you want to run them manually you can use the command below:

yarn test

brandbastion-cc's Issues

Install and configure shadcdn-ui

Redux: Install and configure redux

To use @reduxjs/toolkit to create slices of the components

Post Service: Create a service to fetch posts and comments

We need JSON Placeholder to fetch the posts and comments
Axios service would be required.

Post view: title and body (left side)

Write some unit or functional tests

Posts: Show username

It's needed to fetch all the users on app boot and map post.userId with their names

Update README.md

We might need to update the README with the instructions about how to run this project, also link this kanban board to the Readme

Comment: Tag a comment with autocomplete and create custom

Comment: Reply feature

Create mobile view

When we are on small screen show the right sidebar expanded (full width) only when the post has been selected.

To go back to the post list we might need to show a breadcrumb like "Posts / Post title" on the commnets top section

Comment view: when a post is selected, show a list of comments

Filter: Filter posts by username, title or text body

We might need to use useDeferredValue to filter and optimize the search

Routing system

Install and configure tanstack/router