meower

by CodingGarden

CodingGarden / meower

A basic twitter clone built to demonstrate the full stack.

197 Stars 104 Forks Last release: Not found MIT License 20 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

  • [x] Create client folder
  • [x] Setup index.html
  • [x] Bring in Skeleton CSS
    • http://getskeleton.com/
    • https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css
  • [x] Create Header
  • [x] Create form
    • [x] Name
    • [x] Content
    • [x] u-full-width to both inputs
  • [x] Listen for form submit
  • [x] Hide the form
  • [x] Show loading spinner
  • [x] Get data from form and log it
  • βœ… Get user input on the Client
  • βœ… Hide/Show elements on the client

Back-end

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

Front-end

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

Back-end

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

Front-end

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

Back-end

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

Front-end

  • [x] fetch GET /mews
    • [x] Iterate over array
    • [x] Append each to page
    • [x] Reverse before appending
    • [x] Show the form
    • [x] 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
    • [x] Setup environment variables
    • [x] Database connection
      • process.env.MONGO_URI
    • βœ… Show mlab
    • [ ] Deploy with environment variable
    • now -e [email protected]
    • [ ] 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.