Grad
DesiCodes

Desi Codes

Grad2

Projects /

Link Shortener

Almost a SAAS - Users can shorten long URLS and track total number of clicks. #FunWithReact

Preview LiveStart Watching
screenshot
📟 Tech Stack & Libs
React
Firebase
Material UI
Date-Fns
React-Router
🧑‍🏫 Topics Covered/ What you'll learn

We'll build a full-stack Link Shortener App, similar to Bit.ly & Rebrandly, obviously it won't have all the features that they provide.
Anyone can signup and shorten long URLs, each link has a 'Total Clicks' property which will be auto-incremented whenever anyone visits the shortened link.

  • ⚛️ Building React App from Scratch
  • 🧑‍🎨 Designing the layout using Material UI Lib
  • 🧭 Adding navigation with 🔒 Route Guards
  • 🧱 Setting up Firebase Emulator
  • 🔥 Firestore
  • 📝 App planning and Data modeling
  • ☁️ Cloud functions (event base trigger)
  • 🔐 Writing security rules
  • 🚀 Deploying the app
  • 🌐 Connecting Domain name
⚠️ Prerequisites
  • Basics of React(Should know what components, props, JSX, hooks are)
  • Basic understanding of Firestore or NoSQL database
  • We will be using Firebase emulator, for which you'll need to have JAVA installed on your system.
  • In order to deploy the app(particularly the cloud functions), you'll need a Google Billing Account(Credit card required). Although, you'll not be charged as long as the usage is within the free tier. You even get 300 USD free credit when you link your card.
Provide Feedback
Support

If you’d like to support
the channel and this series

Click here