|
1 | | -# Getting Started with Create React App |
2 | | - |
3 | | -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). |
4 | | - |
5 | | -## Available Scripts |
6 | | - |
7 | | -In the project directory, you can run: |
8 | | - |
9 | | -### `npm start` |
10 | | - |
11 | | -Runs the app in the development mode.\ |
12 | | -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. |
13 | | - |
14 | | -The page will reload when you make changes.\ |
15 | | -You may also see any lint errors in the console. |
16 | | - |
17 | | -### `npm test` |
18 | | - |
19 | | -Launches the test runner in the interactive watch mode.\ |
20 | | -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. |
21 | | - |
22 | | -### `npm run build` |
23 | | - |
24 | | -Builds the app for production to the `build` folder.\ |
25 | | -It correctly bundles React in production mode and optimizes the build for the best performance. |
26 | | - |
27 | | -The build is minified and the filenames include the hashes.\ |
28 | | -Your app is ready to be deployed! |
29 | | - |
30 | | -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. |
31 | | - |
32 | | -### `npm run eject` |
33 | | - |
34 | | -**Note: this is a one-way operation. Once you `eject`, you can't go back!** |
35 | | - |
36 | | -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. |
37 | | - |
38 | | -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. |
39 | | - |
40 | | -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. |
41 | | - |
42 | | -## Learn More |
43 | | - |
44 | | -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). |
45 | | - |
46 | | -To learn React, check out the [React documentation](https://reactjs.org/). |
47 | | - |
48 | | -### Code Splitting |
49 | | - |
50 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) |
51 | | - |
52 | | -### Analyzing the Bundle Size |
53 | | - |
54 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) |
55 | | - |
56 | | -### Making a Progressive Web App |
57 | | - |
58 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) |
59 | | - |
60 | | -### Advanced Configuration |
61 | | - |
62 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) |
63 | | - |
64 | | -### Deployment |
65 | | - |
66 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) |
67 | | - |
68 | | -### `npm run build` fails to minify |
69 | | - |
70 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) |
| 1 | +## San Francisco Public Open Spaces (SFPOPOS) |
| 2 | +> Recreating the SFPOPOS site using responsive design pratices and React.js |
| 3 | +
|
| 4 | +[](https://www.react.dev) |
| 5 | + |
| 6 | +[](http://ansicolortags.readthedocs.io/?badge=latest) |
| 7 | +[](http://shields.io/) |
| 8 | + |
| 9 | +> Web Application where users can search for different public spaces in San Francisco and see the details for each public space |
| 10 | +>> Live demo [_here_](https://sfpopos-one.vercel.app/#/). |
| 11 | +
|
| 12 | +## Table of Contents |
| 13 | +- [Built Using](#built-using) |
| 14 | +- [Getting Started](#getting-started) |
| 15 | +- [Screenshot](#screenshot) |
| 16 | +- [Usage](#usage) |
| 17 | +- [Project Status](#project-status) |
| 18 | +- [Deployment](#deployment) |
| 19 | +- [Author](#author) |
| 20 | + |
| 21 | +## Getting Started |
| 22 | +These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. |
| 23 | + |
| 24 | +### Prerequisites |
| 25 | +What things you need to install the software and how to install them |
| 26 | +- First you need a code editor of your choice, I use [VSCode](https://code.visualstudio.com/) by Microsoft then you will need the current version of [Node](https://nodejs.org/en) to get your React app created and running on your local server. |
| 27 | +- After you need to choose between Vite or Create React App if you are going to code from scratch, if not then just run `npm run dev` in your terminal to get your project showing after changing the directory to your project folder(should be the same name as the one you used to create the app) after running `npm install`. |
| 28 | + - a. If you choose Vite then this article can help with [getting started](https://www.makeuseof.com/set-up-react-app-with-vite/) |
| 29 | + - b. If you choose Create React App then this doc page can [help](https://create-react-app.dev/docs/getting-started/) |
| 30 | +- The rest are dependencies and those require either `npm i` or `npm install`, this page can [help](https://www.npmjs.com/) and you can search the package you need |
| 31 | + |
| 32 | +## Screenshot |
| 33 | +<img width="1252" alt="Screenshot 2024-04-16 at 1 42 26 PM" src="https://github.com/el634dev/sfpopos/assets/84924260/85a65e1f-b7f3-449c-ad7f-a3f5f745cfd4"> |
| 34 | + |
| 35 | +## Usage |
| 36 | +How does one go about using it? |
| 37 | +> |
| 38 | +`User can navigate to landing page and see a input bar to search for different public spaces` |
| 39 | +> |
| 40 | +`User can see a navbar with two buttons to sign up/see a random space and two links to navigate back to the home page/see an about page` |
| 41 | +> |
| 42 | +`User can see a property and the details associated with that public space such as a washroom` |
| 43 | + |
| 44 | +## Project Status |
| 45 | +Project is: _completed_ |
| 46 | + |
| 47 | +## Deployment |
| 48 | +To deploy this project you could run `npm run build`, this creates a version of your project that is bundled and ready for production. However I used Vercel, a frontend deployment tool that is free to help deploy this project. |
| 49 | + |
| 50 | +### Setup on Vercel |
| 51 | +- To create an account sign up using a third-party account such as GitHub or you could do it using a differen username and password, if you use GitHub it will deploy your project straight from GitHub |
| 52 | +- After signup you can login or skip step 1 and log in, go to your overview where you see a space for projects and on the right side click `Add New` |
| 53 | +- After clicking on `Add New` choose what you are adding, this will be project |
| 54 | +- Then aftering the last step, if you choose GitHub you can choose your repository and click on import |
| 55 | +- You are all done! |
| 56 | + |
| 57 | +## Built Using |
| 58 | +> React - The framework used |
| 59 | +> |
| 60 | +> BEM - Naming Convention |
| 61 | +> |
| 62 | +> CSS - The styling used |
| 63 | +> |
| 64 | +> Vercel - Used to deploy the website |
| 65 | +
|
| 66 | +## Author |
| 67 | +- Created by [@el634dev](https://github.com/el634dev) |
0 commit comments