Coder Social home page Coder Social logo

webapi-challenge's Introduction

Sprint Challenge: Express and Node.js - Projects & Actions

This challenge allows you to practice the concepts and techniques learned over the past Sprint and apply them in a concrete project. This Sprint explored Building RESTful Web APIs with Express and Node.js, Server-side Routing, Express Middleware & Deployment and Good Practices. In your challenge for this Sprint, you will demonstrate proficiency by creating an Web API using Node.js and Express.

Instructions

Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.

This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.

You are not allowed to collaborate during the Sprint Challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your PM and Instructor in your cohort help channel on Slack. Your work reflects your proficiency Building RESTful APIs with Node.js and Express; and your command of the concepts and techniques taught during the Express and Node.js, Server-side Routing, Express Middleware & Deployment and Good Practices modules.

You have three hours to complete this challenge. Plan your time accordingly.

Commits

Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons and your project manager).

Description

In this challenge, create a web API around the following resources: Projects and Actions.

Self-Study/Essay Questions

Demonstrate your understanding of this Sprint's concepts by answering the following free-form questions. Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager.

  • Mention two parts of Express that you learned about this week.

  • Describe Middleware?

  • Describe a Resource?

  • What can the API return to help clients know if a request was successful?

  • How can we partition our application into sub-applications?

Project Setup

Follow these steps to set up and work on your project:

  • Create a forked copy of this project.
  • Add your Project Manager as collaborator on Github.
  • Clone your forked version of the Repository.
  • Create a new Branch on the clone: git checkout -b <firstName-lastName>.
  • Implement the project on this Branch, committing changes regularly.
  • Push commits: git push origin <firstName-lastName>.

Follow these steps for completing your project.

  • Submit a Pull-Request to merge Branch into master on your fork. Please don't merge your own pull request.
  • Add your Project Manager as a Reviewer on the Pull-request
  • Your Project Manager will count the challenge as done by merging the branch into master.

Database Persistence Helpers

Please read the following before implementing the Minimum Viable Product:

The /data/helpers folder includes files you can use to manage the persistence of project and action data. These files are projectModel.js and actionModel.js. Both files publish the following api, which you can use to store, modify and retrieve each resource:

All these helper methods return a promise. Please you .then().catch() or async/await

  • get(): calling get returns an array of all the resources contained in the database. If you pass an id to this method it will return the resource with that id if one is found.
  • insert(): calling insert passing it a resource object will add it to the database and return the newly created resource.
  • update(): accepts two arguments, the first is the id of the resource to update, and the second is an object with the changes to apply. It returns the updated resource. If a resource with the provided id is not found, the method returns null.
  • remove(): the remove method accepts an id as it's first parameter and, upon successfully deleting the resource from the database, returns the number of records deleted.

The projectModel.js helper includes an extra method called getProjectActions() that takes a project id as it's only argument and returns a list of all the actions for the project.

Minimum Viable Product

  • Configure an npm script named "server" that will execute your code using nodemon. Make nodemon be a development time dependency only, it shouldn't be deployed to production.
  • Configure an npm script named "start" that will execute your code using node.

Design and build the necessary endpoints to:

  • Perform CRUD operations on projects and actions. When adding an action, make sure the project_id provided belongs to an existing project. If you try to add an action with an id of 3 and there is no project with that id the database will return an error.
  • Retrieve the list of actions for a project.

Database Schemas

The schemas (properties and data type of each property) used to store and retrieve the resources inside the included database (lambda.sqlite3) is described below.

Projects

Field Data Type Metadata
id number no need to provide it when creating projects, the database will generate it
name string required.
description string required.
completed boolean used to indicate if the project has been completed, not required

Actions

Field Data Type Metadata
id number no need to provide it when creating posts, the database will automatically generate it.
project_id number required, must be the id of an existing project.
description string up to 128 characters long, required.
notes string no size limit, required. Used to record additional notes or requirements to complete the action.
completed boolean used to indicate if the action has been completed, not required

We have provided test data for all the resources.

Now that we have a way to add, update, remove and retrieve data from the provided database, it's time to work on the API.

Stretch Goal

  • Use create-react-app to create an application in a separate folder (outside the API project folder). Name it anything you want.
  • From the React application show a list of all projects using the API you built.
  • Add functionality to show the details of a project, including its actions, when clicking a project name in the list. Use React Router to navigate to a separate route to show the project details.
  • Add styling! Perhaps with styled-components.

webapi-challenge's People

Contributors

luishrd avatar ryan-hamblin avatar ivanmora avatar mixelpixel avatar kingatoki avatar justsml avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.