littlemonastar / art101-final

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Meower - Twitter for Cats

A basic twitter clone built to demonstrate the full stack πŸ₯ž (client, server, database).

With the following features:

  • Cats can send a mew πŸ˜Έβœ‰οΈ
  • Cats can see all mews that have been sent πŸ˜»πŸ—‚

example-site

Objectives

  • πŸ“ Diagram the Full Stack
  • πŸ”Ž Differentiate between Client and Server
  • ⌨️ Get user input on the Client
  • ➑️ Send user input from the client with fetch to the server
  • πŸ—ƒ Store data in a database
  • πŸ” Retrieve data from a database on the Server
  • ⬅️ Retrieve data from a server on the client using Fetch
  • πŸ™ˆ Hide/Show elements on the client
  • ✨ Add elements to the page on the client
  • πŸš€ Deploy the client with now.sh
  • πŸš€ Deploy the database with mlab
  • πŸš€ Deploy the server with now.sh

Front-end

Back-end

  • Create server folder
  • npm init -y
  • npm install express morgan
  • Setup index.js
  • Add GET / route
  • Add POST /mews route
    • log out req.body

Front-end

  • fetch POST /mews with form data
  • See the CORS error and revel in this moment
  • βœ… Send user input from the client with fetch to the server

Back-end

  • npm install cors
  • Make sure the server is recieving the data
  • Add JSON body parser middleware
  • Validate name and content
    • Must be a string
    • Cannot be empty
  • If not valid
    • Error code 422
    • Invalid mew, must contain name and content
  • Setup DB Connection
    • npm install monk
    • connect to db
    • create document collection (mews)
  • If Valid
    • Create mew object with
      • name, content, created_date
    • Insert into DB
    • Respond with created mew object
  • βœ… Store data in a database

Front-end

  • Log out created Mew after POST request
  • Show the form
  • Hide loading spinner

Back-end

  • GET /mews
    • Respond with mews from DB
  • βœ… Retrieve data from a database on the Server

Front-end

  • fetch GET /mews
    • Iterate over array
    • Append each to page
    • Reverse before appending
    • Show the form
    • Hide loading spinner
  • fetch GET /mews after creating a mew
  • βœ… Retrieve data from a server on the client using Fetch
  • βœ… Hide/Show elements on the client
  • βœ… Add elements to the page on the client

Back-end

  • npm install bad-words
    • Use filter before inserting into DB
  • npm install express-rate-limit
    • Limit to 1 request every 15 seconds

Deploy

  • βœ… Deploy server with now
    • Setup environment variables
      • Database connection
        • process.env.MONGO_URI
    • βœ… Show mlab
    • Deploy with environment variable
      • now -e MONGO_URI=@meower-db
    • Add alias
  • βœ… Deploy client folder with now
    • Set API_URL based on hostname

What's next?

  • Add comments/replies to a mew
  • User Accounts
    • Don't just have the user enter their name
    • Sign up/Login
  • User Profiles
    • Only show mews from a given user
  • Search Mews
  • Hashtags
  • User @mentions
  • Realtime feed of mews

About

License:MIT License


Languages

Language:JavaScript 77.1%Language:HTML 15.1%Language:CSS 7.8%