03-dtmoney

This is a study project made to develop ReactJS and learn it's concepts.

In this app I've build a cost controll app with a dashboard and a modal to create new transactions. The whole app is using a fake API so we can simulate delay on fetch requests and adapt our front-end with loading visual responses and prepare to future back-end implementation.

The whole project keeps in mind accessibility too, you can navigaton through the app with the keyboard with no problem at all.

For UI/UX design we use Figma with the design build to guide.

Stacks

Front-end: ReactJS, TypeScript, Styled-components, Radix-UI, JSON server, Axios, Figma

Acquired Knowledge

• Vite
• TypeScript
• Knowledge in Styled-components
• Radix-UI
• Radix-UI and Styled-components integration
• Modularization and SOLID concepts
• Form valitations with React Hook Form
• Fake API's with JSON server
• Axios
• ContextAPI
• React Hooks
• Controlled and uncontrolled components
• Performance improvement with React-Context-Selector lib
• Usage of Figma for UI/UX concept, exporting SVG objects and inspect CSS aspects of the UI
• Accessibility functions, like keyboard navigation and good practices

Future updates

• Back-end integration
• User Login
• Vercel deploy
• Edit cost button
• Delete cost button
• Payment method label
• Revenue vs Outcomes graph

Future updates

Usage clone the github repository run npm install to install node dependency's, then:

Use npm run dev:server to start fake api JSON server and npm run dev to start the app on your https//localhost

Reference

• Rocketseat - Ignite Trail
• Vite
• React Hook Form Docs
• Phosphor Icons lib
• Styled-components docs
• Radix-UI docs
• JSON server docs

Contact