A Fullstack CRU Pokemon App built with React and Ruby on Rails.
For simplicity, both the backend and front end will be contained in the same GitHub. If this were a larger project I would most definitely separate the Front and Backend.
Here is a link to the design doc that helped guide me through the project.
Project is created with:
- Ruby version: 3.1.2
- Rails version: 7.0.4
- React version: 18.2.0
Gems:
- rack-cors
- pagy
React Libraries:
- axios
- react-dom
- react-paginate
- react-select
- mui/material
- Add Pokemon
- Update Pokemon
- Pagination
- Responsive Front End
To clone and run this application, you'll need Git, Ruby on Rails, and Node.js (which comes with npm) installed on your computer.
# Clone this repository
$ git clone https://github.com/Nhendy12/pokedex.git
# Go into the repository
$ cd pokedex
#for Backend
# to install all req'd dependencies
$ bundle install
# to make all database migrations
$ rake db:migrate
# generate initial seed data
$ rails db:seed
# start the local server (http://localhost:3000)
$ rails s
# for Frontend
# cd into frontend directory
$ cd pokedex-frontend
# Install dependencies
$ npm install
# Run the app
$ npm startI really enjoyed working on this project and I loved the pokemon aspect that added that personal touch!
It definitely helped me brush up on my React skills and I think in the future I will be adding more to this project!
Items I missed/would have done with more time:
- Better form validation
- Getting the forms to closer match the designs
- Fixing inheritances, right now when you create or update a pokemon it just refreshes the page. I would have liked it to instead just rerender the list of pokemon
- Add tests
- Loading States
- Empty States
- demo
- API docs
- File structure/css organization