Giter VIP home page Giter VIP logo

classroom-practice-app's Introduction

Classroom Practice App

Repetition! You guys got it, just drill it in and go at it. The more times you do it, the more natural it'll feel!

Before Getting Started

Choose a database. The application doesn't have a database dependency currently. Remember, if you're using mySQL, you need to npm install mysql2, and if you're using mongoDB, npm install mongoose. I've only built out some of the boilterplate! Don't feel bad about referencing previous projects. Aim to do it again and again until you don't have to!

Getting Started

Don't forget to npm install!

Build command:

  npm run build

or - with auto rebuild

npm run client-dev

Start command:

  npm start

Note: You wont be able to start anything until you create a server!

* Do you remember which middleware allows us to serve the client side?

Goals -

  1. Build out the backend with 5 endpoints

    • Getting all students
    • Getting a student by name
    • Add a student
    • Edit a student's age
    • Delete a student
  2. Build the client-side

    • Show a list of students
    • Each list-item should display the student's name and age
    • A way to add a student to the backend
    • A way to delete a student
    • A way to edit the student's age
  3. Challenges

    • Let the client-side filter by age
    • Create a middleware to log 'I got this!' when a request comes in

Building the Application

You're going to build a Fullstack classroom list application! At the end, you'll want to be able to see the student's name and age. You want to be able to add students, edit them, and delete them.

Step 1

Lets build some of the backend first,

  • Create a server with express, make sure you have ALL the needed imports/tools
  • We need a connection to the db - do you need a model? or schema.sql file?
  • Build out some controllers - lets start with getting the full list and adding a student
  • Create routes, to get all students and add a student * What type of requests are these?

Think about separation of concerns, what is the job of each file?

Step 2

Connect the frontend, if you've properly built the server, you should now be able to build and serve up the client-side!

  • Get the list from our database - think about how we get it and where we store it!
  • Display the list - think about component-based architecture
  • Build out a way to add students

Remember how props work, delve into where it make SENSE to create functions

Step 3

Lets build a bit more functionality,

  • Lets make a way for us to delete a student, starting on the backend
  • Create a button on the frontend to allow the above! Pay attention to where this is!
  • Do the same for editing the student's age!
  • Create a button to edit!

At this point, we can go back and forth, just make sure you are keeping track of what you're working on

Step 4

Challenge stuff! You're on your own :D

Again, you got this!

classroom-practice-app's People

Contributors

stevkim 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.