• Stars
    star
    771
  • Rank 58,926 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 4 years ago
  • Updated almost 3 years ago

Reviews

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

Repository Details

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Instagram Using React

Building Instagram from Scratch Using React, Tailwind CSS, Firebase (11+ Hour Tutorial Here: https://youtu.be/AKeaaa8yAAk)

💰 Extended paid version here (3 hours 30 mins extra): https://gum.co/react-instagram-clone

📣 Summary

This application (Instagram clone) was built using React (Custom Hooks, Context), Firebase & Tailwind CSS. I have built the following pages within this application: login, sign up, dashboard & lastly the user profile page. There are four different pages, some are public and some are private with auth listeners. Firebase firestore handles all the data, and that data is retrieved using a custom hook.

I used Tailwind CSS for this project and I really enjoyed using it. I used styled components in my previous project, but I have now converted all my projects to Tailwind CSS for ease of use. This will be my last project using Firebase as it's far too complex to use and far too complex to test (especially with Cypress). With Jest, it's also tedious to test Firebase as there's no great mocking library, so you end up just repeating yourself in the tests a lot.

💷 Extended Videos - Tailwind CSS Responsive, React Testing Library & Cypress Tests

If you're interested in the paid version of this course which includes making this application responsive and testing via React Testing Library and Cypress, you can find that here: https://gum.co/react-instagram-clone - a purchase shows your appreciation and allows me to spend more time making videos 🙌

🎥 Subscribe

Subscribe to my YouTube channel here: http://bit.ly/CognitiveSurge where I build projects like this! And don't forget, you can contribute to this project (highly encouraged!).

Preview

More Repositories

1

netflix

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React
JavaScript
2,067
star
2

todoist

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Todoist Using React
JavaScript
1,307
star
3

eslint-prettier-airbnb-react

ESlint + Prettier + Airbnb Style Guide Configuration for React
Shell
161
star
4

tinder

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
112
star
5

newsreader

Building a newsreader using the HackerNews Api, React, React Testing Library, Styled Components, Axios & Memo
JavaScript
81
star
6

compound-components

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
41
star
7

node-ws-multi-chat

HTML
35
star
8

react-dropdown-menu

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
33
star
9

carousel

CSS
27
star
10

jest-playground

Playing around with Jest - Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
23
star
11

pokemon

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
CSS
17
star
12

bill-buttlicker-portfolio

A simple HTML, CSS, JavaScript portfolio.
HTML
11
star
13

newsreader-graphql

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
HTML
9
star
14

cra-react-tailwind

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
CSS
9
star
15

bootstrap-react

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
9
star
16

blackjackmultiplayer

Local multiplayer blackjack built using Qt Creator 5.1.1 (C++); Runs by using a server and client.
C++
7
star
17

instagram-paid

CSS
5
star
18

notes

JavaScript
4
star
19

tooltips-popup

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
4
star
20

react-localstorage

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
3
star
21

test-next-app

TypeScript
3
star
22

androidweatherapplication

Ability to post to the Twitter API; uses WIFI/GPS to grab the user's location; JSON weather information from Wunderground.com using ISO codes; Save weather locations using SQLite.
Java
3
star
23

scrimba-gql-server

HTML
2
star
24

testing-enzyme

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
2
star
25

react-proptypes

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
1
star
26

bill-buttlickers-portfolio-perf

HTML
1
star
27

react-useref

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
CSS
1
star
28

react-select

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
1
star
29

firebreathingdragondirectx11

Fire breathing dragon that can burn villages. The program includes a terrain and a skybox, and lastly an object loader.
C++
1
star
30

grannyshooter

Swift
1
star
31

testing-react-testing-library

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge
JavaScript
1
star