- Wiki Map
- Card Game
- Decision Maker
- Smart TODO List
- Resource Wall
- Schoodle
- Food Pick-Up Ordering
Important!
Use google docs and write out stories that describe the roles, goals and benefits. As a _____, I want to _____, Because _____.
A user scenario describes a context, the action taken, and the result. Given _____, When _____, Then _____.
Read this article, it only takes a few minutes and it is a good process for thinking about user stories.
https://medium.com/@jonatisokon/a-framework-for-user-stories-bc3dc323eca9
Decide what your competative advantage is. Focus on that.
All of the features that you need to prove your method works need to be there. This is an MVP, minimum viable product. Wouldn't it be cool if we focused on the most important things.
You don't need to prove you can make a login flow. We've done that already. You would never do this in production, but for development you can setup a route to log you in as any user.
app.get('/login/:id', (request, response) => {
request.session.user_id = request.params.id;
resonse.redirect('/');
});
The two options are localhost and Heroku. If you are deploying to another server, then test this process early. You should only spend time on this if you have completed your most important features.
Important!
Where are the relationships? Get this reviewed by a mentor.
Tables are nouns, they can be taken right from User Stories.
Follow conventions:
- Table names are plural
- Primary key is
id
- Foreign key is
<table>_id
Follow conventions:
- Browse/List/Index: GET /photos
- Create/Add: POST /photos
- Read/Show: GET /photos/:id
- Update/Edit: PUT /photos/:id
- Remove/Destroy: DELETE /photos/:id
Important!
You need to define where the data that you have chosen to collect is going to go on the pagse you can display.
Design is important. Allow it to highlight your strengths but don't focus on it.
Fonts
Use only one or two fonts.
Font vs Typeface what is the difference?
Colours
With the tools available it is easy to choose colours that go well together.
Inspiration
CSS Frameworks
In no particular order.
Use good git practices. Please.
- Clone
- Branch
- Code & Test
- Checkout master
- Pull & Test
- Merge & Test
- Push
- Branch & Repeat
Do this together.
- Setup GitHub repository with collaborators
- Clone github.com/lighthouse-labs/node-skeleton
- Follow instructions in node-skeleton README
- Make sure your app loads, check for console output
- Commit and push changes to GitHub
- Decide on team responsibilities
There is no perfect way to do this. You need to figure this out within your team. Here are some options.
Vertical
- Break the project out into features
- Prioritize the features
- Each developer would build a feature full stack
Horizontal
- Break the project down into technical domains
- One or more developers will be responsible for an entire domain
- Domains could be ui, api (routes), db
Communication is critical no matter which way you divide the tasks.
Use this to plan your tasks. Everyone should sign up, someone creates a board and invites the rest of the team.
- Slack
- What's App
- Skype
- appear.in
Just pick one you all agree on. Set expectations and meet them. If you need help, ask for it.
Pair programming can be a great way to get started.
Start with a static page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="<fill this in>">
<meta name="author" content="<fill this in>">
<style>
</style>
</head>
<body>
</body>
</html>
See sample in
start.html
.
You can put all of the structure and styles for a page into page.html. Once you feel comfortable, make these into templates. Only start coding the EJS or jQuery JavaScript portion after the style and structure is solid.
Use the static structure to understand how to break your layout into reusable pieces. This will help you break your client code into functions or your template code into partials.
Decide on css naming as a team.
User placeholders for text and images.
- http://fillmurray.com
- http://placekitten.com
- http://meettheipsums.com
- https://loremipsumgenerator.com/
Make sure to test your layouts with a lot of data, and don't alway use 'good' data.
Setup your database schema by creating one or more migrations. Setup some good test data in your seeds. Review your user stories and use the CLI make sure you can make the queries to satisfy them.
Once you are confident your queries work create the interface to the data you are retrieving from the database. The interface is usually the Routes
that you design. Build this in small atomic steps. Use module exports and break your code up.
Let's say my user story is As a user, I can view all of the photos of another user, because I want to see what they are about to eat for dinner.
. We need to figure out how to store this data necessary for this.
I need a photos table and a users table. Photos will belong to users. I've decided to store a link to a photo as a url. This way I can easily use placeholder images. Later on when I add the ability for a user to upload a photo I can update the database with a link to the uploaded photo.
CREATE TABLE users (
id SERIAL PRIMARY KEY NOT NULL,
email varchar(255) NOT NULL,
password varchar(32) NOT NULL
);
CREATE TABLE photos (
id SERIAL PRIMARY KEY NOT NULL,
url varchar(255),
user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE
);
INSERT INTO users (email, password) VALUES ('[email protected]', '123456');
INSERT INTO users (email, password) VALUES ('[email protected]', '123456');
INSERT INTO photos (url, user_id) VALUES('http://www.fillmurray.com/g/200/300', 1);
INSERT INTO photos (url, user_id) VALUES('http://www.fillmurray.com/g/200/300', 1);
INSERT INTO photos (url, user_id) VALUES('http://www.fillmurray.com/g/200/300', 1);
INSERT INTO photos (url, user_id) VALUES('http://www.fillmurray.com/g/200/300', 2);
INSERT INTO photos (url, user_id) VALUES('http://www.fillmurray.com/g/200/300', 2);
INSERT INTO photos (url, user_id) VALUES('http://www.fillmurray.com/g/200/300', 2);
The route that I would use to view this would be /users/:id/photos
. For the purposes of testing I would make this route return JSON, with the intention of having it render a template in the future.
app.get('/users/:id/photos', (request, response) => {
knex('photos').where('user_id', request.params.id).then(photos => {
response.json(photos);
});
});
In the case that I want to create a single page app, or even just query data from an api then this JSON response would be enough.