{"id":23237477,"url":"https://github.com/svimaladhithan/categorization-app-frontend","last_synced_at":"2026-04-10T23:09:58.556Z","repository":{"id":259698281,"uuid":"879220177","full_name":"svimaladhithan/Categorization-App-Frontend","owner":"svimaladhithan","description":"Developed and deployed frontend of the categorization app using react.js","archived":false,"fork":false,"pushed_at":"2024-10-27T18:06:03.000Z","size":78,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-12T00:39:09.715Z","etag":null,"topics":["flowbite-react","reactjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://streamlineinterest.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svimaladhithan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-27T10:37:11.000Z","updated_at":"2024-10-27T19:27:10.000Z","dependencies_parsed_at":"2024-10-27T12:52:09.367Z","dependency_job_id":"17c1261d-748d-4b01-afb2-2b439851236e","html_url":"https://github.com/svimaladhithan/Categorization-App-Frontend","commit_stats":null,"previous_names":["svimaladhithan/categorization-app-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svimaladhithan%2FCategorization-App-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svimaladhithan%2FCategorization-App-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svimaladhithan%2FCategorization-App-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svimaladhithan%2FCategorization-App-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svimaladhithan","download_url":"https://codeload.github.com/svimaladhithan/Categorization-App-Frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247400174,"owners_count":20932930,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flowbite-react","reactjs","tailwindcss"],"created_at":"2024-12-19T04:13:49.024Z","updated_at":"2025-10-30T05:38:09.222Z","avatar_url":"https://github.com/svimaladhithan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Techno-Functional Document: Categorization App\n\n **Deployed the app via Netlify: https://streamlineinterest.netlify.app/**\n\n **To run the app locally, please follow the below commands**\n - npm install\n - npm run dev\n\n## Development Approach\n\n### Project Setup and Planning\n\n- Successfully set up the development environment using **React** with **Vite** and **TypeScript**, **Tailwind CSS**, and necessary dependencies.\n- Analyzed the project requirements for frontend integration.\n\n### UI Design and Component Implementation\n\n- Developed the user interface according to the specified requirements.\n- Integrated the **Flowbite** design component library for **pagination**, **loaders** and other design components.\n- Created the following screens:\n\n  **Register Screen**  \n  - Displays the fields to **Register** a new user.\n  - Implemented **Formik** error validation for real-time error validation on each input field, improving user input accuracy.\n  - Displays a button to navigate to the **LOGIN** screen for existing users.\n  - On successful registration, a verification email containing a unique **code** is sent to the user for account verification.\n    \n  **OTP Verification Screen**  \n  - On successful registration, user is redirected to the OTP Verification screen.\n  - Display the **OTP input field**.\n  - Entering the valid code received in the mail will register the user successfully.\n\n  **Login Screen**  \n  - After OTP verification, user is navigated to the **LOGIN** screen.\n  - Displays the **Email** and **Password** fields.\n  - Implemented **Formik** error validation for real-time error validation on each input field, improving user input accuracy.\n\n  **Categories Screen**  \n  - Displays the **list of categories** fetched from the backend.\n  - User can select or deselect the categories based on their interest.\n  - Implemented **Pagination** to display 6 categories per page for better organization and readability.\n  - Includes a **Submit** button to save the latest category selections to the database, as well as a **Logout** button to logout the user.\n\n**Header**  \n  - Implemented a **static header** which will be displayed across all the screens.\n    \n**Toast Notifications**  \n  - Implemented **toast** messages for every action performed to provide proper user feedback.\n\n- Developed common components for **Text Input**, **Header**, and **Toast** to promote code reusability and maintainability.\n- Ensured the interface is responsive and user-friendly, maintaining high code quality and readability.\n\n### API Integration and Authentication\n\n- Analysed and integrated backend and database using **Node**, **Express** and **MongoDB** and created APIs for Register, OTP Verification, Login, Fetch categories, and Update Categories.\n- Integrated **Axios** to connect the app with the Backend Database API.\n- Implemented error handling for a robust application experience.\n\n### Testing\n\n- Conducted thorough testing across multiple browsers and screen sizes.\n- Verified the app's functionality, user interface, and responsiveness.\n\n### Bug Fixes and Improvements\n\n- Resolved issues identified during testing and fixed any bugs.\n- Fine-tuned the user interface to enhance the overall user experience.\n\n### Coding Standards\n\n- Adhered to proper naming conventions and organized folder structure.\n- Included comments where necessary for clarity.\n- Implemented reusable components and common utilities.\n- Committed and pushed changes using conventional commits.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvimaladhithan%2Fcategorization-app-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvimaladhithan%2Fcategorization-app-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvimaladhithan%2Fcategorization-app-frontend/lists"}