{"id":24073167,"url":"https://github.com/4geeksacademy/react-hello-webapp","last_synced_at":"2025-10-21T20:31:10.321Z","repository":{"id":34785503,"uuid":"151753159","full_name":"4GeeksAcademy/react-hello-webapp","owner":"4GeeksAcademy","description":"Professional Boilerplate for React Web Applications built by 4GeeksAcademy Students","archived":false,"fork":false,"pushed_at":"2025-01-08T19:29:59.000Z","size":4835,"stargazers_count":98,"open_issues_count":0,"forks_count":1736,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-30T20:03:03.817Z","etag":null,"topics":["boilerplate","context-api","react","react-boilerplate"],"latest_commit_sha":null,"homepage":"https://react-hello-webapp-iota.now.sh","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/4GeeksAcademy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-10-05T17:05:12.000Z","updated_at":"2025-01-30T17:33:18.000Z","dependencies_parsed_at":"2024-12-09T18:23:53.537Z","dependency_job_id":"a80ce6fe-967c-4975-95ec-5e0081202d4c","html_url":"https://github.com/4GeeksAcademy/react-hello-webapp","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4GeeksAcademy%2Freact-hello-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4GeeksAcademy%2Freact-hello-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4GeeksAcademy%2Freact-hello-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4GeeksAcademy%2Freact-hello-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/4GeeksAcademy","download_url":"https://codeload.github.com/4GeeksAcademy/react-hello-webapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237547528,"owners_count":19327871,"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":["boilerplate","context-api","react","react-boilerplate"],"created_at":"2025-01-09T17:26:53.108Z","updated_at":"2025-10-21T20:31:10.316Z","avatar_url":"https://github.com/4GeeksAcademy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebApp Template with React JS\n\n\nUsed by 4Geeks.com and 4Geeks Academy students, this template helps to bootstrap your first multi-page web applications by integrating with React latest version, vercel deployments and [Vite](https://4geeks.com/lesson/intro-to-vite-module-bundler) for bundling.\n\n### Getting stated:\n\n\u003e 📦 Make sure you are using at least node version 20.\n\n1. Install the node package dependencies by typing: `$ npm install`\n\n2. Create a .env file by typing `$ cp .env.example .env`\n\n3. Start coding! and the vite dev server with live reload by typing: `$ npm run start`\n\n\n### Styling\n\nYou can update the `./index.css` or create new `.css` files and import them into your current css or js files depending on your needs.\n\n### Components\n\nAdd more files into your `./src/components` or styles folder as you need them and import them into your current files as needed.\n\n💡Note: There is an example using the Context API inside `pages/demo.js`;\n\n### Pages\n\nAdd more files into your `./js/pages` and import them in `./routes.jsx`.\nEach page must match at least one route inside `routes.jsx`\n\n### Centralized Store with useReducer\n\nThis template comes with a centralized \u0026 general state that's shared with all pages and compoentes, we call it \"the store\".   \n\nThe file `./src/store.js` has a default structure for the store, we encourage you to change it and adapt it to your data needs (for example, if you are doing a `Todo list` you will probably have a array of todos here).\n\n+ Learn [how the useReducer works](https://4geeks.com/lesson/optimize-react-components-usereducer).\n+ Read more about [implementing a global state with Context API](https://4geeks.com/lesson/context-api)\n+ Read more about [react hooks](https://content.breatheco.de/lesson/react-hooks-explained)\n\nThe store `Provider` for this context is already set on `./src/main.jsx`. You can access the store from any component using the `useGlobalReducer` hook to get the `store` and `dispatcher`. Check `/views/demo.js` to see a demo. Here is a smaller sample:\n\n```jsx\nimport useGlobalReducer from \"./src/hooks/useGlobalReducer\";\n\nconst MyComponentSuper = () =\u003e {\n  //here you use the hook to get dispatcher and store\n  import { dispatch, store } = useGlobalReducer();\n\n  return \u003cdiv\u003e{/* you can use your actions or store inside the html */}\u003c/div\u003e\n}\n```\n\n## Publish your website!\n\n1. **Vercel:** The FREE recomended hosting provider is [vercel.com](https://vercel.com/), you can deploy in 1 minutes by typing the following 2 commands:\n\nLogin (you need to have an account):\n```sh\n$ npm i vercel -g \u0026\u0026 vercel login\n```\nDeploy:\n```sh\n$ vercel --prod\n```\n✎ Note: If you don't have an account just go to vercel.com, create a account and come back here.\n\n![Vercel example procedure to deploy](https://github.com/4GeeksAcademy/react-hello-webapp/blob/4b530ba091a981d3916cc6e960e370decaf2e234/docs/deploy.png?raw=true)\n\n## Contributors\n\nThis template was built as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sanchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning) and [CyberSecurity Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/cybersecurity).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4geeksacademy%2Freact-hello-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F4geeksacademy%2Freact-hello-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4geeksacademy%2Freact-hello-webapp/lists"}