https://github.com/lorransutter/happy
Backend, frontend and mobile app to connect people to orphanages
https://github.com/lorransutter/happy
reactjs typescript
Last synced: 2 months ago
JSON representation
Backend, frontend and mobile app to connect people to orphanages
- Host: GitHub
- URL: https://github.com/lorransutter/happy
- Owner: LorranSutter
- License: mit
- Created: 2020-10-12T20:29:14.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-21T20:21:33.000Z (almost 5 years ago)
- Last Synced: 2025-06-02T07:20:43.600Z (about 1 year ago)
- Topics: reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 417 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Happy - Next Level Week
Under Development
Project provided by [Rocket Seat](https://rocketseat.com.br) to learn backend, frontend and mobile development employing React JS, React Native and Express.
## :runner: How to run
Open your terminal in the folder you want to clone the project
```sh
# Clone this repo
git clone https://github.com/LorranSutter/Happy.git
# Go to the project
cd Happy
# Go to each folder and install dependencies
cd backend
yarn
cd ../frontend
yarn
cd ../mobile
yarn
```
Now you will need two opened terminals to run the project. One for the backend and another one for the frontend or mobile.
Backend will run on http://localhost:5000/
Frontend will run on http://localhost:3000/
Mobile will run on http://localhost:19002/ (it may vary, check the right url on expo)
```sh
# Go to backend
cd backend
# Run the project
yarn start
## In the another terminal ##
# Go to frontend
cd frontend
# Run the project
yarn start
```
For the mobile web app keep backend running and do the following:
```sh
# Go to mobile
cd mobile
# Run the project
expo start
```
This will start expo CLI on your browser. A QR code will appear on your screen and in terminal. You can scan this QR code with [Expo app](https://expo.io/tools#client) to see the application running in your phone.
## :book: Resources
- [Figma](https://www.figma.com/) - digital design and prototyping tool
- [Mapbox](https://www.mapbox.com/) - an open source mapping platform for custom designed maps
## :computer: Technologies
1. Backend
- [Typescript](https://www.typescriptlang.org/) - superset of JS programming language static typed
- [Node.js](https://nodejs.org/en/) - executes JS scripts in server side
- [Express.js](http://expressjs.com/) - web application framework
- [Multer](https://www.npmjs.com/package/multer) - middleware for uploading files
- [TS node dev](https://www.npmjs.com/package/ts-node-dev) - monitor and restart server after changes
- [Sqlite](https://www.sqlite.org/index.html) - simple SQL database engine
- [Cors](https://www.npmjs.com/package/cors) - provides a middleware that can be used to enable Cross-origin resource sharing
- [ExpressJS Async Errors](https://www.npmjs.com/package/express-async-errors) - handle async errors in express
- [Yup](https://www.npmjs.com/package/yup) - data validation
- [Typeorm](https://www.npmjs.com/package/typeorm) - ORM for typescript
2. Frontend
- [ReactJS](https://reactjs.org/) - frontend library
- [React Icons](https://www.npmjs.com/package/react-icons) - icons library
- [React Leaflet](https://react-leaflet.js.org/) - map component based on Leaflet
- [React router dom](https://www.npmjs.com/package/react-router-dom) - routing and navigation for react apps
- [Axios](https://www.npmjs.com/package/axios) - HTTP requests
3. Mobile
- [React Native](https://reactnative.dev/) - framework for mobile development
- [React Navigation](https://reactnavigation.org/) - routing and navigation for react apps
- [React Native Maps](https://github.com/react-native-community/react-native-maps) - map component for iOS and Android
- [React Native Gesture Handler](https://www.npmjs.com/package/react-native-gesture-handler) - provides touch and gestures
- [Expo](https://expo.io/) - tool for helping mobile development with react native
- [Expo Fonts](https://www.npmjs.com/package/expo-font) - load fonts at runtime
- [Expo Image Picker](https://www.npmjs.com/package/expo-image-picker) - provides UI to acccess images and videos