{"id":22671857,"url":"https://github.com/jesuisstan/contactbookfullstackapp","last_synced_at":"2026-04-15T10:35:36.596Z","repository":{"id":178401350,"uuid":"661812327","full_name":"jesuisstan/ContactBookFullstackApp","owner":"jesuisstan","description":"The objective of this project is to create a contact directory that will be a simple CRUD.","archived":false,"fork":false,"pushed_at":"2024-01-07T19:37:52.000Z","size":7662,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T11:26:42.822Z","etag":null,"topics":["css","express","functional-components","hooks","html","javascript","material-ui","mongodb","mui","react","reactjs","tsx","typescript"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/jesuisstan.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}},"created_at":"2023-07-03T17:52:34.000Z","updated_at":"2024-01-23T21:06:29.000Z","dependencies_parsed_at":"2024-01-07T21:20:38.778Z","dependency_job_id":null,"html_url":"https://github.com/jesuisstan/ContactBookFullstackApp","commit_stats":null,"previous_names":["jesuisstan/contactbookfullstackapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jesuisstan/ContactBookFullstackApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesuisstan%2FContactBookFullstackApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesuisstan%2FContactBookFullstackApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesuisstan%2FContactBookFullstackApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesuisstan%2FContactBookFullstackApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jesuisstan","download_url":"https://codeload.github.com/jesuisstan/ContactBookFullstackApp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesuisstan%2FContactBookFullstackApp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268741923,"owners_count":24300148,"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","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","express","functional-components","hooks","html","javascript","material-ui","mongodb","mui","react","reactjs","tsx","typescript"],"created_at":"2024-12-09T16:16:56.231Z","updated_at":"2026-04-15T10:35:36.582Z","avatar_url":"https://github.com/jesuisstan.png","language":"HTML","readme":"# Project Documentation: Contact Book Fullstack App\n\nThe deployed project can be accessed at https://contact-book-frontend-1n4u.onrender.com \\\nThe source code with explanatory comments is available on GitHub [repository](https://github.com/jesuisstan/ContactBookFullstackApp).\n\n## Objective\n\nThe primary goal of this project was to develop a straightforward CRUD contact directory.\n\n## Implementation\n\nThe project was implemented using functional components and popular hooks in ReactJS with TypeScript and [Create React App](https://facebook.github.io/create-react-app/docs/getting-started), leveraging the Material UI library for its components and styling, in addition to custom CSS modules. The Contact Book App was developed to be responsive, following a multi-platform approach. The following steps were taken to complete the project:\n\n1.  **Backend + MongoDB implementation**: Backend was built with NodeJS and Express server to save time. Database (MongoDB) was attached to backend to store all contacts User would create or modify. Additionally I implemented authentication with email and nickname.\n\n2. **Material UI, Custom Styling with CSS Modules \u0026 Custom Fonts**: Material UI components were utilized to achieve a consistent and visually appealing design. Components such as TextField, Drawer, Card and LoadingButton were used to create responsive and user-friendly web-app and related elements. The GTWalsheimPro font was installed and applied to the project to improve attractiveness of the App.\n\n3. **Deployment**: The code was deployed on a Digital Ocean web server and made accessible through the [URL](http://209.38.216.33:9090/).\n\n4. **Version Control**: The code was hosted on GitHub and made publicly accessible. The repository can be found at https://github.com/jesuisstan/ContactBookFullstackApp.\n\n## Results\n\nDeployed version of the App allows user to:\n\n- get access to his contact list with authentication;\n\n- search for specific contact by his Lastname;\n\n- sort existing contacts by Lastnames;\n\n- create a new contact by opening a side panel with empty fields;\n\n- edit an existing contact by opening a side panel pre-filled with the contact's current information;\n\n- delete a contact from the directory.\n\n## Demonstration\n\n\nhttps://github.com/jesuisstan/ContactBookFullstackApp/assets/82715902/d14c5aaa-026e-4cfb-b397-e2de5dbb1d92\n\n\n## Future Improvements\n\nWhile the project has been successfully implemented and deployed, there are potential areas for improvement:\n\n- **Unit Testing**: Implementing unit tests for the components and functionality of the Contact Book would help ensure the stability and maintainability of the codebase, allowing for easier future modifications and bug fixes.\n\n- **Safari browser support** was not tested.\n\nBy addressing these areas for improvement, the project can be further optimized and polished, providing an even better user experience.\n\n## How to use\n##### 1. Adjust .env file if you need other HOST, PORT, MONGO or other vars.\n##### 2. Adjust \"proxy\" line in frontend/package.json file so that it points to your Server.\\\nFor example:\n- \"proxy\": \"http://backend:9999\" (if you use docker compose to run the App)\n- \"proxy\": \"http://localhost:9999\" (if you use npm)\n\n##### 3. Run the App:\na) with Docker:\n- run docker compose project:\n```sh\ndocker compose up\n```\n\nOR\n\nb) with NPM:\n- install all the dependencies according to 'package.json' file from the root dir:\n```sh\nnpm install\n```\n\n- Start Contact Book Fullstack App:\n```sh\nnpm start\n```\n\n##### 4. Open the App link in browser ([http://localhost:9090](http://localhost:9090) or [http://209.38.216.33:9090](http://209.38.216.33:9090) by default).\n\n##### 5. Additional commands:\n- to list all Docker container:\n```sh\ndocker ps -a\n```\n- to list all Docker images:\n```sh\ndocker images\n```\n- to stop all running containers:\n```sh\ndocker stop $(docker ps -q)\n```\n- to remove all stopped containers:\n```sh\ndocker rm $(docker ps -a -q)\n```\n- to delete all Docker images\n```sh\ndocker rmi $(docker images -q)\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjesuisstan%2Fcontactbookfullstackapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjesuisstan%2Fcontactbookfullstackapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjesuisstan%2Fcontactbookfullstackapp/lists"}