More-Recipes provides a platform for users to share the awesome and exciting recipe ideas they have invented or learnt. Suppose a user comes up with a food recipe, he/she can post it on More-Recipes and get feedback in form of reviews and votes from other users who explore that recipe. Users can also keep a list of their favorite recipes on the application.
How?
This project is broken down into challenges and completion of all phases would contribute greatly to your learning towards becoming a full-stack developer. Upon completion, you would have built a world-class full-stack JS application (front-end and back-end).
Why?
Andela distributes opportunities. We disseminate Learning and catalyse Technology leadership. The project is founded on the premise that aspiring Technology Leaders learn programming whilst building things that matter and that the best way to learn is by building a complete product.
This project has one objective: create opportunities for learning where learners build products that do real stuff. In this way, we will inspire change in African tech landscape.
Challenge 1 - Create Pivotal Tracker Board and HTML/CSS Templates
Timelines
Expected Length to Complete: 1 week
Due Date: 28th of August
Helpful Links & Tips
To get started with Pivotal Tracker, use Pivotal Tracker quick start.
Here is an sample template for creating Pivotal Tracker user stories.
Use the recommended Git Workflow, Git branch, Commit Message and Pull Request (PR) standards. Also adhere to the GitHub Flow guidelines to facilitate code reviews.
Guidelines
Create a Pivotal Tracker Board
Use the Pivotal Tracker Board to create a roadmap for the following client-side and server-side features. NB: you’re not implementing these yet, just create a roadmap. Remember to review the guidelines for how to go about creating your pivotal tracker board.
Templates for the following:
User registration/login pages.
A page that shows top recipes and allows viewers to search for recipes
A page that shows details of a recipe and allows logged in users to do the following:
Post reviews for a recipe
Upvote recipe
Downvote recipe
A page that shows the favorite recipes of a registered user
A page where a registered user can see his/her profile
A page where a registered user can do the following:
Add recipe
Modify the recipe he/she added
Delete the recipe he/she added
Basic API routes that do the following:
Allow users to create accounts and login to the application
Allow a logged in user to add a recipe
Allow a logged in user to modify a recipe he/she added
Allow a logged in user to delete a recipe he/she added
Allow a logged in user to get all recipes in the application
Allow a logged in user to get all his/her favorite recipes
Allow a logged in user to post a review for a recipe
Allow a logged in user to get just recipes with the most upvotes
Other features
On both the server-side and client-side, replace the implementation for authentication with JSON Web Tokens.
Registered user should get notifications (either in-app or email notification)
When his or her recipe gets a review
When a favorite recipe of his or hers gets modified
Registered users should be able to create categories for his/her favorite recipes
Registered users should be able to search for recipes in the application (implement pagination).
Extra Credits: NB: executing one or more features from the extra credits means you have exceeded expectations.
Users should be able to see the number of times a recipe has been viewed.
Registered user should be able to find recipes based on a list of ingredients inputted
Create a Github Repository and clone it to your computer
Tip: find how to create a Github Repository here.
Create three directories in your local git repo
template - this will contain the UI template for the front-end in HTML/CSS
server -this will house your back-end implementation in NodeJS-Express
client - this will house your front-end implementation in ReactJS and Redux
Build out the below specified templates into the template directory
In the template directory, build out all the pages (with HTML, CSS, JS, and any other CSS framework (N.B You are to use either Bootstrap 4 or Materialize CSS framework. Do not download and use any UI template!!! )) and the necessary UI elements that will allow your application perform the following functions:
User registration/login to the application.
This would contain a basic form that allows people create accounts and login to the system.
The submit button is not expected to be functional here.
A page that shows top recipes and allows viewers to search for recipes
A page that shows details of a recipe and allows logged in users to do the following:
Post reviews for a recipe
Upvote recipe
Downvote recipe
A page that shows the favorite recipes of a registered user
A page where a registered user can see his/her profile
A page where a registered user can do the following:
Add recipe
Modify the recipe he/she added
Delete the recipe he/she added
NB: you’re not implementing the core functionality yet, you’re only working on the User Interface!
NB: you are to create a pull request for the templates when you are done working on them locally
Targeted Skills
After completing this challenge, you should have learnt and be able to demonstrate the following skills:
Agile
Use a project management tool (Pivotal Tracker) to manage your progress on the tasks
Github
Create a GitHub repository and clone it locally.
Use Git Workflow, Git branch, Commit Message and Pull Request (PR) standards.
Also adhere to the GitHub Flow guidelines to facilitate code reviews.
HTML/CSS
Create all the templates specified above
Frontend Design - Material Design Frameworks
- Bootstrap 4
Use a Material Design Framework (Material UI or Materialize CSS recommended) and read through Google design spec for your reference or Bootstrap 4.
You are not to download and use any website template. You are to code the HTML, and apply your own CSS and any necessary stylesheets or CSS classes provided by the UI framework of your choice( fe.g Bootstrap 4 or MaterializeCSS).
Challenge 2: Setup Server-Side and Create API Endpoints
Timelines
Expected Length to Complete: 1 week
Due Date: 31st of August
Helpful Links & Tips
Use the recommended Git Workflow, Git branch, Commit Message and Pull Request (PR) standards. Also adhere to the GitHub Flow guidelines to facilitate code reviews.
All Javascript MUST be written in >=ES6 and should use Babel to transpile down to ES5
Classes/modules MUST respect the SRP (Single Responsibility Principle) and MUST use the >=ES6 methods of module imports and exports.
Adhere strictly to the Airbnb style guide for ES6. NB: A good place to start would be ensuring that eslint has been setup and is working!
You can use this link as a guide to using Sequelize ORM.
Install PostgreSQL to your local computer and connect to PostgreSQL database server from a client application such as psql or pgAdmin.
Before you begin this section, ensure to review this materials
Guide to Restful API design
Best Practices for a pragmatic RESTful API
Guidelines
In the server directory:
Setup the back-end (server side) of the application Ensure that you use NodeJS - Express to do this.
Setup eslint for linting Ensure you have the style guide rules configured properly.
Write the server-side code to power the front-end built in challenge 1.
Use Postgresql for relational data persistence and Sequelize as your ORM.
At minimum, you should have the following API routes working:
API routes for users to create accounts and login to the application:
POST: /api/users/signup
POST: /api/users/signin
An API route that allows logged in user to add a recipe:
POST: /api/recipes
An API route that allows logged in user to modify a recipe that he/she added PUT: /api/recipes/<recipeId>
An API route that allows logged in user to delete a recipe that he/she added DELETE: /api/recipes/<recipeId>
An API route that allows logged in user to gets all the recipes in the application GET: /api/recipes
An API route that allows logged in user to post a review for a recipe POST: /api/recipes/<recipeId>/reviews
An API route that allows a logged in user to get all his/her favorite recipes
GET: /api/users/<userId>/recipes
An API route that allows a logged in user to get just recipes with the most upvotes
GET: /api/recipes?sort=upvotes&order=ascending
Ensure to test all routes and see that they work using Postman.
Write tests for all functions, models, middleware and API routes using Mocha or Jasmine.
Integrate TravisCI for Continuous Integration in your repository (with ReadMe badge).
Integrate test coverage reporting (e.g. Coveralls) with badge in the ReadMe.
Obtain CI badges from Code Climate and Coveralls. These should be in the ReadMe.
Integrate HoundCI for style checking commits in your PRs according to the ESLint configuration.
Deploy your server-side application on Heroku.
Use API Blueprint, slate or swagger to document your API. Docs should be via your application’s URL.
Version your API using url versioning starting, with the letter “v”. A simple ordinal number would be appropriate and avoid dot notation such as 2.5. Sample - https://somewebapp.com/api/v1/users
NB: you are to create a pull request for the api routes when you are done working on them locally
Targeted Skills
After completing this challenge, you should have learnt and be able to demonstrate the following skills:
ES6 + Babel
All Javascript MUST be written in ES6 or higher and should use Babel to transpile down to ES5
OOP + SRP
Classes/modules MUST respect the SRP (Single Responsibility Principle) and MUST use the >=ES6 methods of module imports and exports.
.eslint - Airbnb style guides
Use a .eslint in your root directory of your project as your eslint configuration (in your IDE) to expose Javascript syntax errors / nitpicks. Make sure to extend the airbnb styleguide.
Continuous Integration
Integrate HoundCI for style checking commits in your PRs
Integrate a CI tool(e.g. TravisCI) to also run tests and report pass/fail state with badge in readme and also test coverage reporting(e.g. coveralls)with badge in the readme.
Obtain CI badges from Code Climate and Coveralls. p.s this should be in the readme
NodeJS
You were required to create a server directory in your repository and project directory in challenge 1. The“server” directory would contain the server-side implementation you come up with in this challenge required to power the front-end.
Setup the back-end (server side) of the application with NodeJS - Express.
Databases
Implement data persistence using Postgresql with Sequelize ORM
Build API
Download and install the Google Chrome app Postman. This would be used to test the API you are building.
Challenge 3: Implement Front-end using React and Redux
Timelines
Expected Length to Complete:
Due Date:
Helpful Links & Tips
Use the recommended Git Workflow, Git branch, Commit Message and Pull Request (PR) standards. Also adhere to the GitHub Flow guidelines to facilitate code reviews.
All Javascript MUST be written in >=ES6 and should use Babel to transpile down to ES5
Classes/modules MUST respect the SRP (Single Responsibility Principle) and MUST use the >=ES6 methods of module imports and exports.
Adhere to the Airbnb style guide for ES6. A good place to start would be ensuring that eslint has been setup and is working
Use SASS/SCSS to implement all custom styling.
Guidelines
In your client directory, setup your front-end application (ReactJS-Redux).
Ensure Webpack is setup for running mundane tasks NB: At minimum, configure it to convert SCSS => CSS) and transpiling.
Implement the client-side application in React and Redux
This should contain all the features pre-designed in challenge 1.
The implementation should make use of the APIs built in challenge 2.
Write tests for all actions, reducers and components using Enzyme, Jest or any relevant testing utility.
Write End-to-End tests for all features implemented using Protractor, Nightwatch or any Selenium-based libraries.
Ensure your front-end is also hosted on Heroku.
NB: you are to create a pull request when you are done with this challenge
Targeted Skills
After completing this challenge, you should have learnt and be able to demonstrate the following skills:
.eslint - Airbnb style guides
Use a .eslint in your root directory of your project as your eslint configuration (in your IDE) to expose Javascript syntax errors / nitpicks. Make sure to extend the airbnb style guide.
Continuous Integration
Integrate HoundCI for style checking commits in your PRs
Integrate a CI tool(e.g. TravisCI) to also run tests and report pass/fail state with badge in readme and also test coverage reporting(e.g. coveralls)with badge in the readme.
Obtain CI badges from Code Climate and Coveralls. p.s this should be in the readme
Github
Use Git Workflow, Git branch, Commit Message and Pull Request (PR) standards.
Also adhere to the GitHub Flow guidelines to facilitate code reviews.
HTML/CSS
Use SASS/SCSS to implement all custom styling
ES6 + Babel
All Javascript MUST be written in >=ES6 and should use Babel to transpile down to ES5
OOP + SRP
Classes/modules MUST respect the SRP (Single Responsibility Principle) and MUST use the >=ES6 methods of module imports and exports.
Testing
Install libraries required for component/unit tests eg Mocha, Jasmine,, Enzyme, Jest
Install libraries required for integration/e2e tests eg Protractor or other Selenium based libraries
Agile
Use a project management tool (Pivotal Tracker) to manage your progress on the tasks
ReactJS
- Redux
- Webpack
- Task-runners
Use ReactJS with the Redux architecture for your implementation
Install and configure Webpack to run mundane tasks like convert SCSS -> CSS, run your tests(Integration and unit).
A task runner should be setup to handle the various tasks that the application requires which include serving the app, and testing the app
Challenge 4: Implement other Features listed in Pivotal Tracker
Timelines
Expected Length to Complete:
Due Date:
Helpful Links & Tips
Use the recommended Git Workflow, Git branch, Commit Message and Pull Request (PR) standards. Also adhere to the GitHub Flow guidelines to facilitate code reviews.
All Javascript MUST be written in >=ES6 and should use Babel to transpile down to ES5
Classes/modules MUST respect the SRP (Single Responsibility Principle) and MUST use the >=ES6 methods of module imports and exports.
Adhere to the Airbnb style guide for ES6. A good place to start would be ensuring that eslint has been setup and is working
Guidelines
Maintaining all standards set in all previous challenges (tests, API documentation etc.), implement the other features (server-side and client-side) in the roadmap defined in Pivotal Tracker.
Ensure your full-stack application is hosted on Heroku.
NB: you are to create a pull request when you are done with this challenge
Targeted Skills
After completing this challenge, you should have learnt and be able to demonstrate the following skills:
Github
Use Git Workflow, Git branch, Commit Message and Pull Request (PR) standards.
Also adhere to the GitHub Flow guidelines to facilitate code reviews.
HTML/CSS
Use SASS/SCSS to implement all custom styling
ES6 + Babel
All Javascript MUST be written in >=ES6 and should use Babel to transpile down to ES5
OOP + SRP
Classes/modules MUST respect the SRP (Single Responsibility Principle) and MUST use the >=ES6 methods of module imports and exports.
Testing
Install libraries required for component/unit tests eg Mocha, Jasmine,, Enzyme, Jest
Install libraries required for integration/e2e tests eg Protractor or other Selenium based libraries
Agile
Use a project management tool (Pivotal Tracker) to manage your progress on the tasks
ReactJS
- Redux
- Webpack
- Task-runners
Use ReactJS with the Redux architecture for your implementation
Install and configure Webpack to run mundane tasks like convert SCSS -> CSS, run your tests(Integration and unit).
A task runner should be setup to handle the various tasks that the application requires which include serving the app, and testing the app
APPENDIX
Project Assessment Guide
Criterion
Does not Meet Expectation
Meets Expectations
Exceed Expectations
Code Functionality
The code does not work in accordance with the ideas in the problem definition.
The code meets all the requirements listed in the problem definition.
The code handles more cases than specified in the problem definition.
Comments
Solution is not commented.
Solution contains adequate comments.
Solution uses doc style comments and is self documenting.
Code Readability
Code is not easily readable or is not commented.
The names for variables, classes, and procedures are inconsistent and/or not meaningful.
Negligence of style guides.
Code is easily readable and necessarily commented.
The names for variables, classes, and procedures are consistent and/or meaningful.
Style Guides are adhered to.
OOP Usage
Solution did not use OOP or does not use OOP properly by not modelling required objects as required.
Solution made use of OOP according to the requirement of the assignment and does so in the appropriate fashion.
Test Coverage
Solution did not attempt to use TDD
70% test coverage
100% test coverage or 0% test coverage like a Bawse.
Load time optimization (client side only)
Did not bundle JS files and has multiple script includes in index.html(or whatever entry point is)
Bundled all files and has just one include declaration for both JS and CSS
Minifies bundle(s) and has sourcemaps available
UI/UX
Page is non responsive, elements are not proportional, color scheme is not complementary and uses alerts to display user feedback
Page is responsive (at least across mobile, tablet and desktops), color scheme is complementary, and uses properly designed dialog boxes to give user feedback
CC; Tippyboy,
Were u meant to face all, or just one of those challenges in two weeks
And what happens if you can't handle it?
This stuff is beginning to look scary..
Were u meant to face all, or just one of those challenges in two weeks
And what happens if you can't handle it?
This stuff is beginning to look scary..
Don't be scared, you're not supposed to finish everything within 2 weeks, first week we were told that if we can make 4 route to work we have a high possibility of making it to the second week, I couldn't get one route to work very well, so I couldn't make it. It was later I realized that it was actually very simple. you can finish writing all the routes within one day self.
Afolabi6046: does the saberr test count in the recruitment process? my report doesn't look amusing at all
yes it does. hey, don't worry about the report for now.
after going through my report for the last saberr test I realized that my interview questions were based on the saberr report.
I was asked questions on how I will respond to certain scenarios (focusing on your strength and weaknesses from the saberr test). the answers I gave were consistent with the report from my saberr test.
so study the report very well, know your strength and weaknesses. they won't ask you these questions directly ("what are your strength and weaknesses"....that's lame) they already know them.....they also want to know how you're handling those weakness of yours.
Believe me, these questions won't come directly and you won't even realize you are answering them.
I might be wrong, this is just based on my experience.....(I'm a reserved guy, but saberr test almost made it look worst, but I concentrated on my strength and how I could overcome my weaknesses........15% for expressiveness..."Jesus, am I dumb".
I could not take another saberr test because I used the same email(from my last registration) so Andela will use the report from my last saberr test.............you can see that andela is not joking.
Afolabi6046: does the saberr test count in the recruitment process? my report doesn't look amusing at all
It counts i was having lunch with someone from learning and asked him whether this test counts and he said it is used to also narrow down the field. Take every test seriously
Please am having issues accessing the homestudy materials offline. I followed the download instructions, installed web server for Chrome and all. But it still loads a blank page. I'd appreciate a solution
CuteLexy: Please am having issues accessing the homestudy materials offline. I followed the download instructions, installed web server for Chrome and all. But it still loads a blank page. I'd appreciate a solution
Hey man, You can't really study the materials offline. The thing there is you can only download the pages with links to the external resource but you can't access the main material without internet.