You've been randomly assigned to a team.
Pick one member of your team to fork the provided repo :
https://github.com/Kostra0ne/mob-programming-challenge.
He/She will invite the other members of the team as collaborators.
The challenge includes several iterations.
Work as a team and pass the ball.
When your turn comes, you are the driver and the other are the navigators.
Push your code with explicit commit messages.
- initialize the folder for npm
- install hbs express mongoose dotenv
- add a .gitignore file excluding the node modules and .env
- create a .env file containing:
- PORT = 8080
- MONGO_URI = mongodb://localhost/my-dev-squad
- create /app.js, just print a "Hello, World" message
- add a dev script in package.json to launch the app
-
create the folders + files structure:
-
/views
- /partials
-
/public
- /img
- /css
- /js
-
/models
-
/config
-
create the hbs layout with the minimal markup
-
visit unsplash.com to find 3 nice coding related images
-
download them in the appropriate folder
- create /config/mongodb.js
- use the Mongoose Introduction
- connect to the database
- you can test your file separately with : $ node
-
in app.js
-
include the .env configuration
-
then, require the database config file in app.js ! (use a relative path)
-
then, set the intial config for hbs and public assets
-
for the moment, let's hardcode 2 arrays (we'll deal with database in class)
-
A / const users (an array objects)
- each object has 3 properties:
- name
- favoriteLangage
- each object has 3 properties:
-
B / const images (an array strings)
- each string represent the path to an image (see iteration 3)
-
listen to the PORT stored in .env
-
create the app's get routes:
-
/ (renders home + pass images as a view parameter )
-
/my-dev-squad (renders allUsers + pass users as a view parameter)
-
/add-new-ironhacker (renders formUser)
-
create the related views, with a h1 title only
-
Bonus: /api/ironhackers (respond users as a json string :)
- add an index.css with some basic styling
- create a navMain partial to navigate the app (3 links)
- include fontawesome in the layout head
- add a home icon to the navMain
- create an imageGallery view partial (without any styling)
- imageGallery expects an array of strings as argument
- have a look to the app.get("/") route before coding your widget
- the images are displayed with a hbs loop (iterate through this)
Try to work simultaneously on the next iterations !!!
- modify home view :
- include the imageGallery partial
- have a look to the app.get("/") route before ;)
- create /public/css/mod.image-gallery.css
- code the styling for the previous partial (imageGallery)
- advice : use flex OR grid for the job :)
- import the css module in index.css
- modify allUsers view :
- displays a list of users with a hbs loop
- users is an array of objects (name, email, favoriteProgLangage) passed as a view parameter
- have a look to the app.get(" /my-dev-squad") route before ;)
- modify formUser view :
- displays a form with labels and input
- each input MUST have a name attribute (check @mdn)
- userName
- userEmail
- userFavoriteLangage
When done Squad !!!
Everybody should pull the last version. Let's finish the app together :D.
----->
- add a new file @ models/User.js
- define our first mongoose Schema
- create a /bin folder and a seed-users.js file
- list all hackers @allUsers
- add a create-hacker post route
- send our first POST request @formUser
- add a detail view with an update form
- add an update route
- add a remove button on the hackers list
- add a delete route