This responsive web application was built with React and Redux as the final project at Microverse. I also built REST API with Ruby on Rails as the back-end for this application.
In this app, you can manage database resources in API including add, edit, and remove records that you want to track. For example, you can track your daily progress in learning English.
I implemented these things:
- Connected to the back-end API to send and receive data
- With routes for each of the screens, so the user can easily go back and forward
- Use Redux to store info used across the app, like the username
- The project was deployed to Heroku and accessible online
- Implemented user authentication from the front-end to the server
- Created an admin panel to create / update / delete Items (things to measure)
- Made the app responsive, creating both tablet and desktop versions, following design guidelines
- Implemented the progress page with data charts that show the average achievements rate and total scores
A list of commonly used resources that I find helpful is listed in the acknowledgments.
To get a local copy up and running follow these simple example steps.
- On the project GitHub page, navigate to the main page of the repository.
- Under the repository name, locate and click on a green button named
Code. - Copy the project URL as displayed.
- If you're running the Windows Operating System, open your command prompt. On Linux, Open your terminal.
- Change the current working directory to the location where you want the cloned directory to be made. Leave as it is if the current location is where you want the project to be.
- Type git clone, and then paste the URL you copied in Step 3.
e.g. $ git clone https://github.com/yourUsername/yourProjectName - Press Enter. Your local copy will be created.
- Go to helpers/baseUrl.js and rewrite the baseUrl like
http://localhost:3001/so you can run this project in your local environment - To run the server, run
npm start - To run the tests, run
npm test - N.B: Due to compatibility issues and of which I will update my
node-sasssoon, to run this project as of now, you need to be usingnode v16or alower version
- To start using this app as a user, you need to log in with a username and password. This login is authenticated by API
- Then, you can record your track for each item for each day: Idioms, Pronunciation, Reading, etc.
- On the all tracks page, you can check the past tracks you've made
- On the progress page, you can see your progress so far
- Like the ordinary user, you need to log in with a username and password as an admin user, which is required to be given the status of admin: true by the administrator for the API
- You can see how to create admin user in the Readme file for the REST API
- Then, you'll see the admin page. On this page, the items that are added by administrators will show
- By clicking the "Add item" button, it shows the form, and you can add an item
- By clicking each item, you can edit it
👤 Tazoh Yanick Tazoh
- GitHub: @t-yanick
- Twitter: @ElTazoh
- LinkedIn: Tazoh Yanick Tazoh
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Give a ⭐️ if you like this project!
"Bodytrack.it " design idea by Gregoire Vella is licensed under Creative Commons license of the design.
This project is MIT licensed except for the design above
- Microverse Senior Code Reviewers and Career Coaches
- Proptypes
- Moment.js
- axios
- Pluralize
- Google Fonts
- Pixabay
- React Icons
- Iconify