{"id":18964282,"url":"https://github.com/lorransutter/local-library-react","last_synced_at":"2025-04-16T05:31:57.639Z","repository":{"id":37903647,"uuid":"264769044","full_name":"LorranSutter/Local-library-React","owner":"LorranSutter","description":"Express JS tutorial from Developer Mozilla with React","archived":false,"fork":false,"pushed_at":"2023-01-24T02:41:18.000Z","size":2754,"stargazers_count":1,"open_issues_count":26,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-05T23:44:19.547Z","etag":null,"topics":["css3","expressjs","html5","javascript","jest","mongodb","mongoosejs","nodejs","reactjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/LorranSutter.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}},"created_at":"2020-05-17T22:31:24.000Z","updated_at":"2021-07-07T13:31:02.000Z","dependencies_parsed_at":"2023-02-13T13:00:50.884Z","dependency_job_id":null,"html_url":"https://github.com/LorranSutter/Local-library-React","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FLocal-library-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FLocal-library-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FLocal-library-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LorranSutter%2FLocal-library-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LorranSutter","download_url":"https://codeload.github.com/LorranSutter/Local-library-React/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223697760,"owners_count":17187860,"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":["css3","expressjs","html5","javascript","jest","mongodb","mongoosejs","nodejs","reactjs"],"created_at":"2024-11-08T14:23:35.239Z","updated_at":"2024-11-08T14:23:35.880Z","avatar_url":"https://github.com/LorranSutter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  Local Library - React\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\nThis project is an extension of a previous version of a tutorial from \u003ca href='https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website'\u003eDeveloper Mozilla\u003c/a\u003e to build a Local Library using \u003ca href='http://expressjs.com/'\u003eExpress JS\u003c/a\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nThis application was developed using \u003ca href='https://reactjs.org/'\u003eReact\u003c/a\u003e as frontend, but also you can check this application implemented using Pug template \u003ca href='https://github.com/LorranSutter/Local-library'\u003ehere\u003c/a\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href='#straight_ruler-Development-pipeline-and-challenges'\u003eDevelopment and challenges\u003c/a\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#runner-how-to-run\"\u003eHow to run\u003c/a\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#book-Resources\"\u003eResources\u003c/a\u003e\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\n    \u003ca href=\"#computer-Technologies\"\u003eTechnologies\u003c/a\u003e\n\u003c/p\u003e\n \n\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://res.cloudinary.com/lorransutter/image/upload/v1591732356/Local_library_react_preview.gif\" alt=\"Preview Chat\" height=200/\u003e\n\n\u003c/div\u003e\n\n## :straight_ruler: Development pipeline and challenges\n\nThis project is an extension from this [another project](\u003c(https://github.com/LorranSutter/Local-library)\u003e) implemented using Pug. You may check the whole development pipeline there if you want. Here I will just talk about the differences and new challenges.\n\n1. As mentioned above, this project is an extension of a previous version. I have decided to extend this version so as to I could learn more about [ReactJS](https://reactjs.org/). For such, I should start turning my Pug template into a API.\n\n2. Initially, I started this project to learn more about ReactJS. However, I realized that it was the opportunity to improve another skill: **testing**.\n\n3. Before moving to frontend development with React, I set out to build test cases to my API. I chose to use [Jest](https://jestjs.io/) as my testing framework, due to its simplicity and because I had already have some contact with this tool.\n\n   In the meanwhile, I got confused with integrating properly my API with Jest using mongo as database. I found this blog [Endpoint testing](https://zellwk.com/blog/endpoint-testing/) as a valuable source to help me on this path.\n\n4. We have lots of great system designs provided by companies so as to developers can create apps based on the interfaces of these companies. I have decided to use [Polaris](https://polaris.shopify.com/) from Shopify to develop this interface.\n\n   Polaris is a great system design with a extensive documentation of how and where to use colors, shapes, icons, spacing and so on. Also, it provides a great library of react components, which makes really easy to develop your own interface.\n\n## :runner: How to run\n\nOpen your terminal in the folder you want to clone the project\n\n```sh\n# Clone this repo\ngit clone https://github.com/LorranSutter/Local-library-React.git\n\n# Go to the project folder\ncd Local-library-React\n\n# Go to each folder and install dependencies\ncd backend\nnpm install\n\ncd ../frontend\nnpm install\n```\n\nNow you will need two opened terminals to run the project. One for the backend and another one for the frontend.\n\nBackend will run on http://localhost:5000/\n\nFrontend will run on http://localhost:3000/\n\n```sh\n# Go to backend\ncd backend\n\n# Run the project\nnpm start\n\n## In the another terminal ##\n\n# Go to frontend\ncd frontend\n\n# Run the project\nnpm start\n```\n\nIf you want to use your own mongodb account, replace the following variable with your own mongo URL:\n\n```sh\n# Go to backend/connectionDB.js\nMONGOURI = \u003cyour-url\u003e\n```\n\nThen you may populate your database using the following command:\n\n```sh\ncd backend\n\n# Go to populate.js and change the mongo url as well\nMONGOURI = \u003cyour-url\u003e\n\n# Run script\nnode populatedb.js\n```\n## :book: Resources\n\n- [Developer Mozilla](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website) - tutorial to build local library\n- [Endpoint testing](https://zellwk.com/blog/endpoint-testing/) - article about testing\n\n## :computer: Technologies\n\n- [Polaris](https://polaris.shopify.com/) - design system\n- [Express](http://expressjs.com/) - web application framework\n- [MongoDB](https://www.mongodb.com/) - NoSQL database\n- [Async](https://caolan.github.io/async/v3/) - library to perform asynchronous operations\n- [Express validator](https://express-validator.github.io/docs/) - middleware to validate data\n- [ReactJS](https://reactjs.org/) - frontend library\n- [Axios](https://www.npmjs.com/package/axios) - HTTP requests\n- [Jest](https://jestjs.io/) - library for tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florransutter%2Flocal-library-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Florransutter%2Flocal-library-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florransutter%2Flocal-library-react/lists"}