VideoAsk is a web application that transforms how businesses and individuals communicate through interactive videos. It allows users to create videos with questions. In the near future users can also make live calls, and deploy video chatbots, all aimed at making conversations more efficient and strengthening business relationships. VideoAsk offers a versatile solution for a wide range of communication needs.
To set up the VideoAsk project locally, follow these steps:
Clone the repository and run docker compose at the root of the repository :
git clone https://github.com/imadmi/interactive_video.git && cd interactive_video && docker compose up --buildClone the Repository:
git clone https://github.com/imadmi/interactive_video.gitEnter the front-end folder:
cd interactive_video/front-endInstall node dependencies:
npm iRun the front-end
npm run build && npm run startEnter the back-end folder:
cd ../back-endInstall node dependencies:
npm iChange the DATABASE_URL to 'Supabase for dev mode' in the back-end .env and then run :
npm run migrateRun the back-end
npm run startOpen your prefered browser and Enter : http://localhost:3000
The architecture of VideoAsk is designed with scalability, maintainability, and user experience in mind. The frontend is built on Next.js, providing a dynamic and responsive user interface. Components within the application are modular and reusable.The components used shared data saved in the built-in React Context API, ensuring efficient data flow and updates across the application.
The backend is built with NestJS, ensuring a well-organized project. It also ensures secure login, sign-in, and logout processes using JWT and bcrypt. Additionally, it ensures the safe saving of user videos in the PostgreSQL database using Prisma ORM.
How can I store the videos and questions, and depending on each answer, will I be redirected to another video?
1-Storing Videos and questions: Each VideoAsk represents a video and its associated questions. The questions field in the VideoAsk model is a list of Question objects, where each Question has a question field for the question text and a next_video_id field that can be used to redirect to another video based on the answer. The VideoAsk model also has a userId field to associate it with a User, indicating who created the video. The schema is designed based on the linked list data structure to efficiently link videos and their associated questions. This structure allows for a dynamic and flexible way to navigate through a series of videos, where each video can lead to another video based on the user's interaction or answer to a question.
2-Redirecting Based on Answers: When a user answers a question in a video, you can use the next_video_id field in the Question model to determine which video to redirect to next. This field should contain the id of the VideoAsk that the user should be redirected to after answering the current question. If the next_video_id is null, it means there's no specific video to redirect to, indicating the end of the video series so the user is redirected to another route 'Dashboard is the default'.
I tracked the logged-in user by using JWT (JSON Web Tokens) for authentication. JWT allows you to securely transmit information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be used to authenticate users and manage sessions, ensuring that the user remains logged in across multiple requests.
For safely storing user data, including passwords, I used bcrypt. Bcrypt is a password-hashing function designed to secure passwords by transforming them into a hash. This hash is a one-way function, meaning it cannot be reversed to obtain the original password. When a user logs in, their password is hashed and compared to the stored hash. If the hashes match, the password is correct, and the user is granted access. This method significantly enhances security by protecting user passwords.
What kind of database should I use, and why? Should I choose a relational or non-relational (NoSQL) database?
I chose a relational database because the app involves users, videos, and questions inter-related. Using a non-relational database would significantly complicate, if not make impossible, the management of these relationships. Relational databases are particularly suited for this task because they allow for the efficient storage and retrieval of data that is interconnected through relationships, such as foreign keys. This feature is crucial for this application, as it enables us to easily query and manipulate vidoAsks, questions and users.
I created the animations for a website using Framer Motion library for React
I styled the front end using Tailwind CSS, which facilitated the rapid development of a responsive design. Tailwind's utility-first approach allowed me to directly apply styling within the JSX, ensuring that the website adapts smoothly across different screen sizes without the need for custom CSS media queries.
I actually did not use any libraries for playing or displaying the video. If you want a video player as customized as the one in the app, you should create it yourself.
As for video optimization and CDN, Next.js takes care of that. Check the link bellow for more info :
https://nextjs.org/docs/app/building-your-application/optimizing/videos#resources
A React library that enables developers to create animations and gestures with ease. It provides components that can animate, drag, or scroll, enhancing the user experience with interactive animations.
A library for creating highly customizable toast notifications.
Provides React components for a large variety of icons from popular icon libraries. It allows easy incorporation of icons in React applications, offering a wide range of icons with simple import statements.