| Wednesday | Thursday | Friday | Monday | |
|---|---|---|---|---|
| Morning | React Code Challenge (90mins) | Standup | Standup | Project Mode |
| Get Groups | Project Planning | Project Mode | Project Mode | |
| Afternoon | Project Ideation | Lunch | Lunch | Lunch |
| Project Pitches | Project Mode | Project Mode | Project Mode | |
| Evening | Project Planning | Project Mode | Feelings | Project Mode |
- 90 minutes
- Will be graded and given feedback before 3pm
- You got this!
- Start brainstorming for your project.
- What do you and your partner want to get out of the mod 4 project?
- Are there things you want to test out prior to mod 5?
- With your group, put together a short pitch.
- What is the base functionality of your app?
- What are the things a user can do?
- Are there additional technologies are you interested in using?
- What the project's Minimum Viable Product?
- What features would I like to have as stretch goals?
- What are the project's backend routes?
- What are necessary models?
- What does the app look like?
- Draw out a mock / wireframe for the app
- What are the necessary components?
- What is the component hierarchy?
- Where do props and state live?
At 9:15 please gather as a group to do standup. Each group should give a two sentence overview of what their app does. Use this as a time to solicit help or ask the group questions. Throughout the day if you run into problems, slack your classmates. Everyone will be facing similar issues during the first few days of the project.
- What's the last feature you worked on?
- What's the next feature you want to complete?
- If your app could make a sound, what would it be?
- Huddle & shout (or whisper)
Crank it out!
At 9:15 please gather as a group to do standup!
- What's the last feature you worked on?
- What's the next feature you want to complete?
- If your app was an appetizer, what would it be?
- Huddle & shout (or whisper)
Build cool things!
😄🚀
The biggest advice we can give you for project mode is to scope your project idea down! Make the tiniest MVP possible and have a lot of stretch goals. Build new features onto your MVP iteratively. That is the way to build a great product.
- Create branches for each feature you add (e.g. add-user-functionality)
- Commit frequently to your branch
- From your branch make a pull request against master and merge the work in
- Delete the branch
- If you use this workflow, your master branch should always be in a good working state.
You've been through quite a few Project Modes by now and should have some idea how to think about scoping a project, what you can accomplish in a the designated time, and what is expected of you in terms of meeting complexity requirements.
The guidelines here are minimal but be sure that you:
- Use a Rails API backend with a separate React frontend that are created in two different Github repositories.
- Have at least three resources on the backend and your application must have full CRUD actions for at least one resource.
- React Router is not required. You can build a single-page application.
- Do not implement authorization. If your project involves a user model, see the below section.
- Have a user sign in on the frontend
- Send this information (email or username) to the backend
- In your Rails controller find the matching user and sent back to your frontend. (Figure out how you want to handle errors if a user is not found in your database.)
- Save this user into React state
We will be covering Auth next week and you will have plenty of time to work with it in your mod 5 projects. Right now your job is to focus on controlling data flow in React.
It is highly suggested that any calls to 3rd party APIs are made through your backend.
Example: A user clicks a button that says 'Get Gifs'
- React makes a request to Rails
- Rails makes a request to the Giphy API
- Rails receives the response from Giphy and sends to React
- React receives the response from Rails and you do something with it on the client
This is so you can avoid any CORS issues. If you are unable to hit an API from your React app due to a CORS restriction, it is very likely that it is impossible to do so. Brief Refresher on CORS: the idea is that from one domain (the port your webpack development server is running on) you are not allowed to access another domain. You must make the request from a server (i.e. Rails), so the request is exempt from the Same-Origin Policy restriction.
rails new <my-project> --api -T --database=postgresql
Let's go through this in detail:
--api- Make a Rails 5 API, basically you're telling Rails you don't want any of the stuff you wouldn't need for an application where Rails is not rendering views. Think the ActionView library (
form_for,link_to, etc..), ERB, Security protections that ensure forms were rendered by the Rails app, things like that.
- Make a Rails 5 API, basically you're telling Rails you don't want any of the stuff you wouldn't need for an application where Rails is not rendering views. Think the ActionView library (
-T- don't generate tests for this app
--database=postgresql- Set this up to use a Postgres (as opposed to SQLite) database. If you ever want to push this to Heroku, Heroku requires a Postgres database. There won't be too much difference in how you have to write your code. You'll have to be sure to run
rails db:createand make sure you have postgres running (i.e you can see the elephant)
- Set this up to use a Postgres (as opposed to SQLite) database. If you ever want to push this to Heroku, Heroku requires a Postgres database. There won't be too much difference in how you have to write your code. You'll have to be sure to run
- Be sure to do the necessary setup for the rack-cors-gem
- You may want to use active-model-serializers
To create your React project, you may use a tool called create-react-app, an awesome project generator developed by Facebook. To use this
npm install -g create-react-app- this installs the generator as a global package- In the directory where you'd like to create your project,
create-react-app my-project-client. It's that simple!
We'd reccommend to begin by removing any of the default stuff given to you by Create React App that you do not understand. The following are some really great resources on how to think about setting up a React project (Spoiler: They both say the same thing, "There's no right answer!")
- React Docs This was written by Dan Abramov himself <3 <3 <3....
- The 100% Correct Way to Structure a React App (or why there’s no such thing)
By default both your client app and your rails app will run on port 3000. You'll have to specify one or the other to run on a separate port.
- Rails:
rails s -p <some_number_thats_not_3000> - React: Check out this issue
A great article on how DHH thinks about setting up controllers in Rails
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent