Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/azurespheredev/fitbod-assignment
I developed a User Exercise Plan Board with integrated Performance List Management functionalities, utilizing Next.js 14 and TypeScript. The solution was crafted in accordance with the specified requirements. Please feel free to reach out to me via [[email protected]].
https://github.com/azurespheredev/fitbod-assignment
axios eslint husky jest nextjs14 styled-components typescript
Last synced: 2 days ago
JSON representation
I developed a User Exercise Plan Board with integrated Performance List Management functionalities, utilizing Next.js 14 and TypeScript. The solution was crafted in accordance with the specified requirements. Please feel free to reach out to me via [[email protected]].
- Host: GitHub
- URL: https://github.com/azurespheredev/fitbod-assignment
- Owner: azurespheredev
- Created: 2024-04-02T21:17:47.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-02T21:29:39.000Z (8 months ago)
- Last Synced: 2024-11-12T10:48:33.063Z (2 days ago)
- Topics: axios, eslint, husky, jest, nextjs14, styled-components, typescript
- Language: TypeScript
- Homepage: https://fitbod-solution-dustin.vercel.app
- Size: 218 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fitbod Technical Assignment
I developed a User Exercise Plan Board with integrated Performance List Management functionalities, utilizing Next.js 14 and TypeScript. The solution was crafted in accordance with the specified requirements. Please feel free to reach out to me via [[email protected]][email].
[Source Code][solution-url] . [Live Page][live-page]
### Figma Design
Table of contents
- [Design](#design)
- [Technologies](#technologies)
- [Features](#features)
- [Screenshots](#screenshots)
- [How to Run](#how-to-run)
- [Contact](#contact)
## Overview
### Design
Here is base Figma Mockup I followed.
https://www.figma.com/file/dVLLigYSANNzRHb70Mz2hU/Web-Assignment-v2?type=design&node-id=0%3A1
### Technologies
- [Next.js 14.1](https://nextjs.org) for SSR and SSG implementation.
- [React 18.x](https://react.dev) for building the UI by optimizing the rendering process.
- [TypeScript](https://www.typescriptlang.org) as a primary programming language.
- [Styled Components](https://styled-components.com) for component-level styling.
- [Axios](https://axios-http.com/docs/intro) for API data fetching and integration.
- [ESLint](https://eslint.org) to enforce coding standards and practices.
- [Husky](https://typicode.github.io/husky) to automate code checks before commits, preventing errors.
### Screenshots
### Features
- Showcase of Loading spin component while fetching data from the API.
- Showcase of Error message when data fetch is failed.
- Fully Responsive Design for web, tablet and mobile devices.
- Navigation to dynamic routes by clicking items on the homepage.
- Add a performance item by entering reps and weight inputed by the user.
- Store the list to localStorage to make sure the data to be persisted.
### How to Run
1. Create an .env file to the root project and paste `GOOGLE_API` variable.
```bash
GOOGLE_API=https://storage.googleapis.com/fitbod-web-internal/exercises.json
```
2. Install required dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### Contact
Thank you for considering my proposed solution. I would greatly appreciate any feedback or evaluation you could provide. Should you have any comments or require further information, please do not hesitate to contact me at [[email protected]][email].
Looking forward to your response!
[live-page]: https://space-tourist.vercel.app
[solution-url]: https://www.frontendmentor.io/solutions/space-tourism-solution-in-nextjs-OMUOrt3m__
[email]: mailto:[email protected]