This project serves as a Frontend Developer - Intern recruitment task for Codibly. It is a simple web application for displaying items fetched from API Server in tabular format. The table is paginated to display five items. Users can click on a row to display the item's details in a modal.
The app is fully responsive and was tested on different screen sizes.
To run the development server:
- Clone the repository to a local directory.
- Change the directory to 'codibly-app'
cd codibly-app. - For NPM Package Manager
- In the terminal type
npm install - Once the installation of dependencies is completed, type
npm run dev.
- In the terminal type
- For Yarn Package Manager:
- In the terminal type
yarn install. - Once the installation of dependencies is completed, type
yarn dev
- In the terminal type
- The development server should start, click on the link in the terminal for localhost.
The production version can be found here.
API endpoint can be found here.
-
- TypeScript: strongly typed programming language build on JavaScript used to develop interactive components of the website.
- HTML: the markup language used to create the website.
- CSS: the styling language used to style the website (used in styled-components)
-
- ReactJS: version 18.2.0, was used for building a user interface
- React Bootstrap: version 2.7.0, was used to style the app with built-in tools.
- styled-components: version 5.3.6, was used to inject CSS styling directly to component.
- React-Redux: version 8.0.5, state management tool used to create store for the app.
- Redux-Toolkit: version 8.0.5, toolset for efficient Redux development.
- React Router: version 6.6.1, a library for client side routing.
- formik: version 2.2.9, a small library used for efficient form development.
-
- Netlify: was used to build and host the front-end.
- Git: the version control system used to manage the code.
- Vite: was used as a frontend development building tool.
- GitHub: used to host the website's source code.
- VSCode: the IDE used to develop the website.
- Fontawesome: was used to implement icons with animation.
- Grammarly: was used to check grammar and typo errors.
- Yarn: package manager used for the project.
- eslint: ESLint statically analyzes code to quickly find problems. Was used to check any linting errors and warning in the code.
Open the app by navigating to this page.
Users can change the display by typing valid URL parameters. If they are invalid, users will be redirected to the "Not Found" page.
- Not working icon comes from "https://www.pngitem.com/middle/hJwTimh_thumb-image-dead-face-transparent-hd-png-download/".
- 404 not found icon comes from "https://icon-library.com/".
- Broken glass background comes from "https://www.cleanpng.com/png-transparent-glass-fragments-16845/download-png.html".
- Codibly Recruitment Team - for giving me a chance to improve my skills by doing this task - regardless of the outcome it was a great experience for self-development. Thank you!
Created by Milosz Misiek
