• Stars
    star
    222
  • Rank 179,123 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A basic twitter clone built to demonstrate the full stack.

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

More Repositories

1

mac-setup

This repo contains info on all the apps / tools / settings I use on my Mac.
469
star
2

react-ts-starter

A bare-bones vite + react + typescript starter template with eslint + prettier, vitest + @testing-library and react-router
TypeScript
208
star
3

travel-log

A full stack application to store / list places you have traveled.
JavaScript
198
star
4

listd

listd is a Full Stack App that will allow users to create, share and watch lists of YouTube channels. This app is being built LIVE on Twitch https://twitch.tv/codinggarden
TypeScript
190
star
5

intro-to-typescript

TypeScript
142
star
6

faqs

Welcome to the Coding Garden Frequently Asked Questions! If you are new here and you have a general question, it's very likely I've answered it already.
142
star
7

miniature-umbrella

A url shortener created live on stream in 3133.7 seconds.
JavaScript
139
star
8

inventory-app

JavaScript
115
star
9

seedling-school-01-frontend-project

For your first project, you will build a frontend website with HTML, CSS and JavaScript. The website will communicate and integrate with a 3rd party Web API.
106
star
10

entropychat.app

A discord clone made by the Coding Garden Community.
JavaScript
103
star
11

trello-clone

JavaScript
97
star
12

learn-to-code-resources

82
star
13

fresh-spots

A Deno Fresh Full Stack App for sharing lists of places to visit
TypeScript
80
star
14

guest-map

A map application where users can leave messages with their location.
JavaScript
54
star
15

troll-garden

JavaScript
54
star
16

vue-firestore-reddit-clone

Vue
47
star
17

mars-weather-api

JavaScript
41
star
18

coding-improv

JavaScript
39
star
19

vue-3-appstravaganza

Vue
38
star
20

live-chat-manager

A dashboard that allows me to manage incoming chat messages from YouTube and Twitch.
JavaScript
35
star
21

sproutkit

Apps and Components for Twitch Overlays
Vue
34
star
22

frontend-framework-showdown-2020

Build the same Image Search App with Vanilla JS, React.js, Vue.js, Svelte and more!
TypeScript
34
star
23

auth-for-newbs

Vue
34
star
24

twitch-bot

A general purpose twitch bot that will work with multiple channels. (Work in Progress...)
JavaScript
32
star
25

next-travel-log

TypeScript
27
star
26

now-config

JavaScript
26
star
27

react-typescript-guestbook

A guestbook application built with React + TypeScript + React Router + ESLint + Prettier + Material UI + React Hook Form + Easy Peasy
TypeScript
26
star
28

intro-discord-bot

JavaScript
24
star
29

types-of-websites

JavaScript
23
star
30

community-forum

JavaScript
23
star
31

css-challenges

HTML
23
star
32

amazon-price-scraper

JavaScript
22
star
33

higher-order-functions

These are the materials/exercises for the live stream.
JavaScript
22
star
34

intro-dot-net-core-web-api

C#
22
star
35

api

An API for the Coding Garden YouTube / Twitch channel.
JavaScript
22
star
36

news

21
star
37

intro-react-hooks-todo

JavaScript
20
star
38

intro-react-todo

JavaScript
20
star
39

discord-manager

JavaScript
20
star
40

snap-garden

Realtime ephemeral image sharing + maps.
JavaScript
19
star
41

morning-tea

Links to news I discuss on my morning tea stream.
JavaScript
19
star
42

learn-deno-v1.0.0

TypeScript
18
star
43

live-chat-window

JavaScript
17
star
44

101ways-to-deploy-react

JavaScript
16
star
45

react-pixel-art-maker

A simple 8x5 pixel art maker grid. Built with React.
JavaScript
14
star
46

gme-stonks

JavaScript
14
star
47

auth-for-newbs-v2

JavaScript
14
star
48

feathers-chat-svelte

FeathersJS Chat Client built with Svelte
HTML
14
star
49

frontend-framework-showdown

All the code for my frontend framework showdown stream.
TypeScript
13
star
50

deploy-with-now-v2

JavaScript
13
star
51

chess-board

JavaScript
13
star
52

type-one-in-chat

JavaScript
13
star
53

ez-pizza-api

A simple library for interacting with the Dominos Pizza API.
JavaScript
12
star
54

build-simple-jquery

JavaScript
12
star
55

puny.li-url-shortener

A simple Full Stack URL Shortener
HTML
12
star
56

message-board-server

JavaScript
12
star
57

vue-3-hacker-news-client

Vue
12
star
58

SeedlingDrop

JavaScript
12
star
59

tryday-friday

PHP
12
star
60

stonk-ticker

JavaScript
12
star
61

choosing-a-full-stack-framework

TypeScript
11
star
62

message-board-client

Vue
11
star
63

landscaping

This repo is used to track suggestions and ideas from the community for coding garden streams.
11
star
64

dramatic-sound-board

A sound board with dramatic hits, swells, rises, loops and songs.
HTML
11
star
65

twitch-team-shoutout-bot

A bot that detects when a team member has entered the twitch chat and sends a shout out message.
JavaScript
10
star
66

colorado-covid-vaccine-map

JavaScript
10
star
67

coding.garden

The Coding Garden website.
Svelte
10
star
68

things-you-should-learn-before-learning-react

CSS
10
star
69

is-it-new-years-day

A site that tells you if it is new years day or not.
JavaScript
9
star
70

thankfulfor

JavaScript
9
star
71

community-forum-db

JavaScript
9
star
72

vox

JavaScript
9
star
73

AMA

JavaScript
9
star
74

yt-caption-downloader

Download all captions (subtitles) for all videos on a given youtube channel.
TypeScript
9
star
75

vue-vs-react

JavaScript
8
star
76

variety-show

JavaScript
8
star
77

twitch-map-check-in

JavaScript
8
star
78

rgb-led-matrix

Control an Arduino + RGB LED Matrix with Twitch Chat!
JavaScript
8
star
79

vue-todo

Intro to Vue.js: Build a Todo App
HTML
8
star
80

twitch-vote-overlay

JavaScript
8
star
81

stream-overlay-alerts

JavaScript
7
star
82

svelte-appstravaganza

Several small apps built with svelte.
JavaScript
7
star
83

happiness-is

JavaScript
7
star
84

twitter-ml

JavaScript
7
star
85

devpardy

A local 3 player jeopardy app. Based on Vue.js and Electron.
Vue
7
star
86

cj-eye

https://cj-eye.now.sh/
JavaScript
7
star
87

embtr

A simple website / scraper to get embeddable website preview cards.
JavaScript
7
star
88

SeedlingDropV2-RevengeOfTheNewts

JavaScript
7
star
89

youtube-live-chat-api

JavaScript
7
star
90

autocomplete-ui-showdown

TypeScript
7
star
91

learning-to-hack

TypeScript
7
star
92

yt-auto-chapters

JavaScript
7
star
93

pkmn-codes

JavaScript
6
star
94

tdd-game-of-life

JavaScript
6
star
95

video-filter

JavaScript
6
star
96

hit-counter

JavaScript
6
star
97

nature-image-api

JavaScript
6
star
98

vue-state-components-props

This is the code for my live stream.
Vue
6
star
99

down-the-rabbit-hole

6
star
100

front-end-opoly

JavaScript
6
star