This project was created with the boiler plate using the nodee package execution command for create react app.
This is a project that comprises of a user login page, an all users lists information page and each user details page.
The project concept was made to suite and solve many organizational's problems that can be encountered uaing a manual filing system as well as providing easy access to user details. It is an application concept that an organization in the financial sector can implements inn order to safe stress and increase prodctivity.
In the project directory, you will find:
This is the folder that compiles all my pages and component into a more simplified format to be able to access and navigate around. I created a dashboard and a login folder in this directory that holds the login, users lists page and the user details page.
This folder holds all the components that are divided. This is to avoid the project being messy, as i used the folder for most component that doesn't directly display user details but has important logic for the app functionality.
This folder holds the dashboard and navbar exported icons and images from the figma design files for easy access.
The store folder is for the react global state management. I made use of redux toolkit for storing and retrieving user datas.
This folder is where i added all my different styling module and imported it into the index.scss alone for better access to any other developer that might have a reason to work on my code base.
From years of experience, I have always loved to split and share my project task loads. I approach the projject by building the state for my application immediately after i understand the conccept of the task. Using typescript, i need to prepare all my variables for an allocated type and with the access to the API through my postman software, I was able to understand the type of data I am going to be consuming on the frontend.
** safe to note **
I created a static mock data for my exepected data in order to split my tasks concerns.
A web application that doesn't send out any data but consumes and display to the authenticated user
The need for me to separate my files and understand how to go about it. I used a whiteboard approach. This helps me to understand my css layout and how to tackle the task! i.e will grid be okay or i need a flexible parent element.
This aspect is where I had to make use of my components folder the most because it holds components that I used to define the app logic majorly.
I made use of the camelCase majorly for all the application's naming but for best practices, the css naming format is that of hyphen delimitters.