Introduction: Funny Video Application

Its just a small application that allow the user can see the shared youtube videos, with un-authen user they can access the video list, they can sign up and login as logged user. With logged user they can share any post from youtube by simple paste the youtube link. They also can get a small notification with any new video shared by other logged user.

The nicest thing on this application, We use 100% Backend features on firebase, so we don't need any backend service, but i still cover all features: authentication, realtime for youtube videos and the in-app notification.

Demo Link : https://funny-movies-vanbui.netlify.app/

Prerequisites:

• NodeJS: Version >= 18
• Yarn: >= 1.22 (optional you are OK to use npm)

Installation & Configuration

• Make sure you are the root of the project
• Run yarn install with yarn or npm install with npm
• I build application with firebase (backend + database + authentication), you can use frontend application only that default connect with my firebase, if you really need to touch and use new firebase, please take a look on Backend/Database Setup

Installation & Configuration

Running the application

• Make sure you are the root of the project and install dependencies like section: "Installation & Configuration"
• Run yarn dev or npm run dev to start application in dev server locally
• The URL will be shown like the image below, just click on the link to access the application

Run the test suite

• Make sure you are the root of the project and install dependencies like section: "Installation & Configuration"
• Run yarn test or npm run test to run the test suite
• The test result will be shown on the console like the image below

Build & Deploy

Build

• Make sure you are the root of the project and install dependencies like section: "Installation & Configuration"
• yarn build
• the build folder is "./build"

  Deploy

• Upload the dist folder file to whatever CDN service that you want to host: netlify, github page... eg: https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/

Backend/Database Setup

• I recommend you can use directly my firebase config on the current frontend code, you don't need to create a new firebase project to test out the app, but if you really want to setup a new one, please follow these steps:

  • 1. Create new firebase project
  - 2. Add new web application on the new firebase project
  • 3. After create new application please copy the config object
  
  • 3. Add new authentication provider "Email & Password", just make sure turn on it
  - 4. Create video collection and first record
  • 5. Replace firebase config object to the file src/modules/common/firebase/firebase.ts
  
  • 6. You are done, you can restart the server or rebuild again

Usage

• User can access the shared videos via home page, they don't have share button to share until they register or login

• Register & login:

  • Just make sure fill correctly format for email & password
  • I have a validation on almost form, after register i will let the user login successfully
    • I keep the user session by using the sessionStorage, so every tab will have different session for easier testing
  

• User can click on share button when logged

  

• When user submit successfully, all users can see new post

• When user submit successfully, all logged users receive a notificaiton about new shared post

  

Folder structure

.
src
├── ...
├── pages                     # Contain all main pages, the root component of each page
│   ├── my-page               # My Page
├── components                # Contains all common/general/layout components
├── services                  # HTTP service layer, the one connect with backend api
└── enums                     # Define all enums or const variables
└── types                     # Define all interface & type of the project (except the component types)
└── public                    # All public resources (image, svg, font...)
└── main.tsx                  # React entry point file (Root)
└── index.css                 # CSS entry point file (Root)
└── tailwind.config.cjs       # Tailwind config, I configured all colors/spacing of the guideline via this file