Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wolfgunblood/frontend-test
Fullstack video application
https://github.com/wolfgunblood/frontend-test
t3-stack
Last synced: about 1 month ago
JSON representation
Fullstack video application
- Host: GitHub
- URL: https://github.com/wolfgunblood/frontend-test
- Owner: wolfgunblood
- Created: 2024-07-15T06:57:33.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-30T08:40:28.000Z (4 months ago)
- Last Synced: 2024-09-27T12:40:14.811Z (about 2 months ago)
- Topics: t3-stack
- Language: TypeScript
- Homepage: https://frontend-test-coral.vercel.app
- Size: 32.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Vidpod
๐ฅ Build using T3 Stack
# VidPod
Vidpod is a full stack web application that allows video creators,podcasters and content creators to analyze and place ads dynamically.
This app is build using T3 stack.
## ๐ด Demo
๐งช [Live Demo](https://frontend-test-coral.vercel.app/) available. Click "Live Demo" to open it.
## Showcase ๐ฌ
You can see a GIF of my application below.Preview the main functionality of the app.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Features](#features)
- [Design Patterns](#design-patterns)
- [Technologies Used](#technologies-used)
- [Contact Information](#contact-information)
- [Resources](#resources)
## Installation
1. **Clone the repository:**
```bash
git clone https://github.com/wolfgunblood/frontend-test
```
1. **Navigate to the project directory:**
```bash
cd frontend-test
```
1. **Install dependencies:**
```bash
npm install
```
## Usage
**Run the development server:**
```bash
npm run dev
```
## Features
**Homepage** - Displays the dashboard for editing and adding of ads.
**Video Player** - An awesome video player with play/pause,skip,fast forward and rewind functionality.
**Custom Video Slider** - Built a custom video silder using the design which has zoom and drag functionality.
**Dynamic ads insertion** - One can add ads on the desired time.
**Dynamic ads edit** - After ads placement ads can be edited through drag and drop or just through a edit form.
**Dynamic ads deletion** - One can delete ads without any hassle.
**Undo and Redo** - One can undo and redo without any hassle.
**Server-side Rendering** - This site leverages NextJS server side rendering for faster load times and greater user experience.
**Custom Animations** - Custom animations are featured throughout the application.
**ShadCN components** - Highly customisable pre built components are featured throught the app.
**Simulated Database Response** - I have intentional made the API fetch the data slower to simulate a database and to show user feedback as well as showcasing loading and fetching states.
## Design Patterns
**Maintainability** - I have tried to keep components modular and scalable and dynamic, with an emphasis on reusability and readability.
**Server fetching and formatting** - I am handling fetching and formatting of data on the backend, allowing for tsx components to render data without unnecessary logic or formatting on the front end. I have achieved this by creating dynamic helper functions that process and reformat the data.
**Dynamic fetch function** - I have created two highly flexible server functions to handle all the data fetching necessary for the application.
**Type Safety** - The use of types and interfaces is constant throughout the app, without a single use of the word 'any' to override the type check.
**File and folder structure** - The app is organised to seperate components based on their role, as well as separating types, utils, server functions and constants.
**Saving and committing work often** - I regularly made commits and pull requests to github using a total of 36 pull requests with clear commit messages. This keeps the project organised and allows me to work on tasks without altering the main codebase.
## Technologies Used
This tool is built using these technologies:
- โผ๏ธ [Next.js](https://nextjs.org)
- โ๏ธ React 18
- ๐ฐ TypeScript
- ๐ [Tailwind CSS](https://tailwindcss.com)
- ๐ [Prisma](https://prisma.io)
- ๐ฅ [NextAuth.js](https://next-auth.js.org)
- ใฐ๏ธ [tRPC](https://trpc.io)
- ๐ ESLint
- โจ Prettier
## Contact Information:
[](https://www.linkedin.com/in/jalajdorai/)
[](https://www.x.com/jalajdu/)
[](https://github.com/wolfgunblood/)
#### Made by Jalaj Doraiburu
#### Email: **[email protected]**
#### Tel: **+91 7209787530**
### Thank you for reading
I am really grateful for your time and I hope you like what you see here.