At first glance, this application might seem simple, a vending machine, but I've integrated various types of tools within. For the frontend, I've used React with TypeScript. I've established a solid file architecture and organized the logic by moving it out of the components into а custom hooks (which, in my opinion, is a better approach for modular and reusable code). The code uses strong TypeScript. Following that, I've used unit testing as well as Integrational unit testing, which you can see in `src/App.test.tsx`. Additionally, I've used Cypress for e2e unit testing.
For global state management, I've utilized Redux Toolkit. I've developed two distinct approaches for data retrieval. Approach 1: Redux & Thunks — a classic approach that works well and is implemented in many projects.
Approach 2: Redux & RTK Query—this approach is significantly better for several reasons that I've detailed in an article I've written on the topic. One of the many advantages of RTK Query that I appreciate is optimistic updates, a unique feature.
For HTML and CSS, I'm used one of the best libraries, MUI, which allows me to structure and reuse my code intelligently and create HTML elements in a very efficient manner. Additionally, I've used Storybook, although I had almost no time to develop the components within a isolated environment (that`s the way to start developing the components, but...). I've also included a bundle analyzer to analyze bundles and point out any that are excessively heavy or large, among other things. I've also incorporated standard tools like ESLint, Prettier, and Husky.
For the server-side, I've employed the best language from my repertoire—GO LANG. In this case, I've opted for the Fiber Framework, renowned as the fastest HTTP framework for delivering raw data in GO. However, in many cases, I tend to prefer GIN. This section of the application isn't overly complex; I've established a connection to a MongoDB database. I've implemented a CRUD model and utilized goroutines for database queries. I used a playground for data validation and have created custom messages for feedback. In terms of middleware, I've created just a basic CORS function.
You can download the code and explore it from the
GitHub repository.Main Technologies:
- React
- Typescript
- Redux/Toolkit
- MUI
- Jest
- Cypress
- bundle analyzer
- ESLint, Prettier, and Husky (airbnb)
- Go Lang
- Fiber Framework
- Go playground
- MongoDB