This application serves as a showcase of my current FE skills. This project was built in 2-3 days. It was deployed using vercel and the demo can be seen here.
For this project I've used:
To run the app locally, you must first install all dependencies:
yarn installAfter doing so, just run:
yarn startAs there is no convention in React on how to structure your project, I see this as a good skill to showcase.
Inside the /src directory, it boils down to:
/modules- all the different modules/pages (/commonstores everything being shared between the different modules). Each module has its own scope and is composed by:/components/core- models, constants, enums, etc./hooks- custom hooks./utilsindex.ts- exports everything from this module that needs to be exposed to the outside.
/router- everything related to the router, includingcomponents,enums,layout./services- services of the application, which basically consists in a class, composed only by static methods that make the API call and return the data./setup- this stores everything that it's related to some setup that the application might need, likeaxios,store, etc. (this could also store therouterandi18nconfiguration).i18n- i18n configuration and translations.
A basic implementation of the Compound Pattern, as shown in the Accordion.
Custom Hook that wraps React Query, for improved organizion and readability.
A simple reducer implementation to group logic related to the same state.
Using React native solution to share state between multiple components, avoiding prop drilling hell, as shown here.
Using React Router Dom, to simplify all the routing related tasks.
Error handling - if the API request fails, an error toast will be displayed and the user redirected to Home Page.
Loading Handling - while waiting on API response, a Loading Skeleton will be displayed in place of the data.
The application already includes translations for english, spanish and portuguese. It can be interacted using the right upmost dropdown.
I also wanted to display some basic styling skills, including animations. I've used some components library to speed up the development process.
Components layout, styles, and basic animations on the nav bar and dropdowns of the second section (where the iphone is displayed).
Simple wizard/stepper which can be accessed by clicking the top right corner button Contact Sales.
It has some simple validations to allow user to move back and forth in the stepper (which can be seen in the code).
Used a public API to fetch some data and display it in a table and in a details page.
Can be accessed by clicking any of the shortcut buttons (Developers, Marketers, Product Owners or Sales & Support) under the hero image. The user details page can be accessed by pressing the Edit button on any of the rows of the users table.