A React application to help you and your friends choose where to eat
EatsyPeasy
A single page application to help you and your friends choose where to eat! Answer 3 simple questions to generate a customized selection of restaurants, and have the option to send a poll to your friends as well!
Dependencies & Tech Stack
- Ruby 2.6.6
- Rails 4.2.11 Rails Guide
- PostgreSQL 14.1
- React 17.0.2
- React DOM 17.0.2
- React Router
- Google Places API
- thingproxy – for quick, initial Google API testing
- Axios
- Chart.js
- Clipboard.js
- Material UI
Full Application Development (self-hosted)
Default port settings:
⋅⋅* Front-end: http://localhost:3001
⋅⋅* Back-end: http://localhost:3000
Pre-Installation
Before working on EatsyPeasy locally, you must get an API key from Google Places API.
Installation Part 1: Frontend
- Clone the repository to your local device, change directory into root and then “frontend”, then install dependencies.
git clone git@github.com:faezcat/EatsyPeasy.git
cd EatsyPeasy
cd frontend
npm i
- In the frontend directory, create a .env file by copying the .env.example file in the frontend directory of the project. Add the API key from Google Places API.
cp .env.example .env
Opening up the .env file, replace “your-key-here” with the Google Places API key.
REACT_APP_GOOGLE_PLACES_API_KEY=your-key-here
- Optional: By default, the frontend is set to
http://localhost:3001. To change the port, inpackage.json, change the port number where it says3001:
"scripts": {
"start": "PORT=3001 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Installation Part 2: Backend
- Change directory to the “backend” and install dependencies:
cd /EatsyPeasy
cd backend
bundle install
- Get the database set-up, starting by logging into
psql, creating the database and then verifying that it was created:
psql
create database eatsypeasy;
\c eatsypeasy
\dt
For the back-end, migrate the tables and schema:
bin/rake db:reset
bin/rake db:migrate
To verify that the schema has been migrated to the database, run an SQL command. Note that the table will be empty, but you should see the column names:
psql eatsypeasy
select * from users;
- Optional: If you changed the front-end port in “Installation Part 1: Frontend” – Step 3, this step will apply. To avoid CORS issues, the back-end is using ‘rack-cors’ middleware for connection to frontend
http://localhost:3001. To change the frontend port configuration, in config > initializers >cors.rb, change the port number where it says3001:
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'localhost:3001'
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
- Optional: By default, the backend is set to
http://localhost:3000. If using a different back-end port, the API get/post requests in the front-end will need to be updated. This can be done by searchinghttp://localhost:3000and replacing the port with your new back-end port number.
Starting your Servers:
On front-end:
npm start
Go to localhost:3001 to view the app.
On back-end:
rails s