TikTok has taken the world by storm in recent years, and now I'm excited to announce the launch of my new app - a TikTok clone! This app allows users to browse and watch short-form videos, just like TikTok.
You can try it online: https://tik-tok-clone-ethen.vercel.app/
As the internet continues to evolve, we can expect to see more and more video applications emerge in the future. My app aims to provide a simple template for video applications, allowing other developers to easily add their own unique features and create their own video platforms.
My app includes all the basic and necessary features for a video website. Guests can watch videos without logging in and browse videos based on different popular topics. They can also search for videos and users, with a blur search function available.
Once a guest logs in, more features become available. Users can upload their own videos and add tags to them. They can also like videos and save them to their portfolio, allowing them to re-watch them whenever they want. Users can even post comments on videos and communicate with others, sharing their thoughts and connecting with other users.
I chose Google OAuth as my login system for several reasons. Firstly, it is a safer, more user-friendly, and cost-effective option. Developing authentication systems from scratch can be time-consuming and risky due to potential security breaches. In contrast, Google OAuth is free to use and implement, and users don't have to share their login credentials. Additionally, Google's security protocols ensure that data is encrypted and stored securely. Secondly, using Google OAuth allows users to access applications with a single login, making it a convenient choice. However, it's worth noting that Google is planning to stop their Sign-In JavaScript Platform Library on March 31, 2023, which is why I opted to use Google OAuth 2.0 for my authentication system. The documentation is straightforward and easy to follow, making the integration process simple.
Then, I chose Next.js, TailwindCSS, and Sanity as the framework and tools for this project. My decision to use Next.js was based on two main factors: server-side rendering and deployment. Given that the application involves loading many videos, slow loading times would pose a significant challenge. With server-side rendering, the HTML of a webpage is rendered on the server before being sent to the client's browser, improving page loading times and offering a better user experience. This is particularly helpful for slow internet connections, as users can see the content of a webpage more quickly, making the application more responsive and improving the overall user experience. Additionally, deployment of the application is simplified with Next.js, as Vercel offers a free tier hosting service that is fast and stable, making it an ideal choice for individual developers who want to save costs.
P.S. for those who have error while deploying, just add
typescript:{
ignoreBuildErrors:true
},
to next.config.js
I chose TailwindCSS for styling and components because it is more flexible than using components, making the application simpler. Components can be complicated, and using them can sometimes cause conflicts with other frameworks like MUI or AntD. For example, a button of AntD may become transparent whilte using Tailwind. To fix it, just add
corePlugins: {
preflight: false
}
in tailwind.config.js. In contrast, TailwindCSS provides a comprehensive set of pre-defined classes that can be used to style HTML elements more efficiently, helping to maintain a consistent look and feel across the entire web application. Using TailwindCSS also resolves the issue of name conflicts that can arise in traditional CSS. With consistent class names, conflicts can be avoided, and smaller CSS files can be used, making it easier to maintain the application's design.
Finally, I decided to use Sanity as a CMS to make the application more user-friendly, even for non-developers. Initially, I considered using a traditional database like MongoDB or Firebase, but I realized that a CMS system would make the application easier to use. Sanity's highly customizable and flexible CMS solution makes it a great choice for projects with complex requirements. Its real-time collaboration and customizable workflows make it suitable for teams working on large or complex projects, and its scalability and rich text editing features make it suitable for projects with large amounts of content or complex multimedia requirements. This makes it an ideal choice for the application as a template that can be used in different situations.
I developed the this application in just 3 days, and while it's still in beta, it's a fully-featured and responsive application. The app is currently deployed on Vercel, and we already have some videos and users. Now, we're excited to invite you to join us!
Thank you for checking out my new app. I can't wait to see what you think of it!
Top comments (0)