You've made it! You're ready to build a full-stack application with a powerful backend framework! The goals of this project are to:
The instructions below will walk you through the process of ideating and planning your app: deciding on your models and relationships, planning how the information will be laid out on the page, etc. You should work through all the planning steps before you start doing any coding.
For this project, you must:
fetch().Once you've got a solid plan in place for your app and you're ready to start coding, begin your project with the format described in the "Full-Stack Development" module. Remember to separate client and server code. We have provided a template project that you may use as a starter if you so choose.
Start by deciding on a domain for your app (such as "AirBNB for dogs"). Then, decide what user stories your app will need. It is helpful to break up your user stories between what is required for the Minimum Viable Product (MVP) version of your app, and what you'd like to save for stretch features after you've met your MVP goals.
For example:
After deciding on your app's user stories, you can design the models that your application will need in order to represent these user stories.
Look at the list of your user stories, and pick out the different nouns/objects that you need to represent these user stories. These objects inform what models you need. For example, from the list above, we have:
You can also get a sense of the relationships between the models and use that as the basis of your Entity Relationship Diagram (ERD). For example, we can tell based on the user stories above that a review belongs to a specific user — since a user is able to create a review — and a review belongs to a specific dog house.
You can use a website like dbdiagram.io to help make an ERD and represent these relationships, or draw out something simple:
User -< Review >- DogHouse
DogHouse >- UserThis is also a good time to think about what attributes your models will need. What foreign keys are needed to establish relationships? What other attributes might you need to display data in your frontend, or make other aspects of your user stories work?
For your frontend, it's a good idea to follow the ideas from [Thinking in React][] as you're designing your React application. That means starting with a visual representation of what your application should look like, in the form of a wireframe. The wireframe should give you a basic visual representation of what each page of your application should look like, and it should capture all of your user stories.
Here are some tools for wireframing (pen and paper is also a fine choice!):
Use your wireframe to plan out what components you'll need and design your component hierarchy, following the ideas from Thinking in React.
Once you have your plan in place, and have a sense of your:
It's time to start building! As you're building, work on each feature in vertical slices rather than horizontal. For example, rather than building out all the models, routes and controller actions in the backend, then working on the components in the frontend and finally styling everything, work on one feature at a time, such as working on login, then displaying a list of dog houses, then leaving a review.
You can visualize all the parts of an app you need to build as a grid, with the desired features in columns and the different layers of the stack in rows:
| Create new listing | View dog houses | Leave a review | |
|---|---|---|---|
| Migrations | |||
| Models | |||
| Seed Data | |||
| Controller actions | |||
| View Logic | |||
| Data Fetching | |||
| Styling |
You may be tempted to order your project timeline row-by-row. Do not do this! If you try to build all your migrations, then all your models, then all your controllers, then all your fetch calls, then all your view logic you will have a bad time. Inevitably, your view logic ends up requiring changes to the underlying layers, and you end up building models that you never use. If you instead build each feature (each vertical slice) in its entirety before moving on to the next feature, you'll minimize rewriting, and end up with working features without waste.
Also, remember to prioritize your MVP features. It can be tempting to try and build everything at once, but that is a sure-fire way to end up with many broken features instead of a solid core of working features.
The template project has all the starter code needed to help you deploy your application to Render. It's recommended to deploy your project early and push up changes often to ensure that your code works equally well in production and development environments.
Follow the instructions in the template to deploy your app!