Meower - Twitter for Cats
A basic twitter clone built to demonstrate the full stack
With the following features:
- Cats can send a mew
πΈ βοΈ - Cats can see all mews that have been sent
π» π
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
- Create client folder
- Setup index.html
- Bring in Skeleton CSS
- Create Header
- Create form
- Name
- Content
- u-full-width to both inputs
- Listen for form submit
- Hide the form
- Show loading spinner
- Get data from form and log it
β Get user input on the Clientβ Hide/Show elements on the client
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
- Create mew object with
β 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
- Database connection
β Show mlab- Deploy with environment variable
- now -e MONGO_URI=@meower-db
- Add alias
- Setup environment variables
β 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