mini_rails_react_project.md

Mini Project

This is a chance to implement a Rails / React full stack app, and get some practice with all the pieces of technology we have used to date.

We are again going to base the app around recipes. I'm also happy for you to continue to build upon the countries travel app that you started earlier this week if you want. If you are feeling confident, you are welcome to take this project off in any direction that you like, and start building something that you are interested in, as long as you use React, Rails and a relational database.

But if you are keen on some direction, please follow these steps.

If you don't understand what is going on in any of these steps, please ask. It is important to understand why you are taking these steps as you go.

1. Create a new directory named recipes-app-review, cd into the directory and run:

   npx create-react-app recipes-client
   rails new recipes-api -d postgresql -T --api
   

2. Think about how to arrange your data. We just need a basic structure, so come up with two or three recipes, and one or two ingredients per recipe to represent the data structure. For now hard code in your data and build just one route that gives back all your data as one array of hashes. Perhaps we could have something like this:

   const data = [
     {
       name: "Chocolate cake",
       cooking_time: "2 hours",
       method: [
         'Mix all the ingredients together',
         'Add the egg',
         'Put in the oven'
       ],
       ingredients: [
         'egg',
         'sugar',
         'butter'
       ]
     },
     {
       name: "Pumpkin soup",
       cooking_time: "30 mins",
       method: [],
       ingredients: []
     }
   ]

3. Use Postman to hit your API and see that you are getting the data back as you expect.

4. Hard code the same data into your react app's <App /> component, and work on getting something simple to display.

5. Make a <Recipe /> component, and have this display just one recipe. Then swap this out for a list of recipes - map through your recipe data and have each recipe display (at the root).

6. Configure your models and Postgresql. If it's simpler for now, you can have just one model, and hold that data there, returning one big complex object if we were to fetch all the recipes. Eventually we might want to setup the relationship of many_to_many where a recipe has_many ingredients and an ingredient has_many recipes.

7. Check that this data is available from your API using Postman.

8. Now we have connected our API to our Postgresql database (via Active Record), and we are getting our data back from the API. We need to connect our React front-end to our Rails API and have everything connected. You can do this several ways, but let's start by keeping it simple. We have all out data represented in one big structure in our Postgresql database, and our API returns that structure from one route. Previously we represented the data in our React front end in the same way. So from your App component, write a function that will hit the API and return that structure. If you have this going, you will be able to take out the hard-coded data from the React side. You will need to consider lifecycle methods, and placing the data into state.

9. Now our app is wired up from start to finish. Hopefully at this stage you will have a good idea of how it all fits together. From here we will start to think about ways to make the app more complex, and make some more end points for our API. But if you have made it this far you have created a full-stack Rails React project!

10. Make the recipes clickable, and have the recipe name and ingredients for the recipe appear on the page when clicked.

11. Implement the many_to_many relationship between recipes and ingredients if you were yet to do so

12. Implement routes in your Rails app to return all the recipes in the database, and the ingredients in the database.

13. Make a route that returns only the ingredients from an recipe (when the recipe is passed as params).

14. Extend the challenge to implement React Router if you have not already done so.

15. Implement a way to register a new user and login an existing user this will require changes to all components of the app - new components using forms in React, new routes in the API and new models for Rails

16. Create protected routes using knock that restrict a non logged in user from accessing particular routes - for example only logged in users can see all recipes/methods/ingredients (swap this out for whatever you are building) but to add a new recipe/method/ingredient you must be logged in

17. Send back the user object alongside the JWT when the user logs in

18. Now that you have the user in the frontend, update the React homepage to include a personalized welcome message for the user.

19. Implement full Create/Read/Update/Delete (CRUD) operations for your recipes/methods/ingredients (again, swap this out for your example) again, this will require you to implement functionality in multiple components of your system - API and React