Threads App inspired by Instagram Web version by NFORSHIFU234 Dev || Shifu-Nfor Nyuiring-yoh Rhagninyui
This is a project that I made/created to test my front end skills in HTML CSS and JavaScript. I also was learning how "SCSS" works.
The Live Page for this project is:
The GitHub Respository for this project is:
The idea for this project came to mind on the 09th July, 2023 annd then I took it to bring something similar to reality and on the 16th July, 2023, the project was complete except for a specific bug which was videos were not playing automatically on IPhone as users scroll the page except they had to click on the video before it played.
You can visit the scribe tutorial using the link https://scribehow.com/shared/Visual_Tutorial_on_My_Web_Version_of_Threads_App_Using_HTML_CSS_and_JavaScript_inspired_by_Instagram_Web_Layout__hkxZGq8kScGyqBn_LXyFmw
NOTE: This project has no partnership with either Instagram.com, Threads.net or any Services from Meta
-
This project has a responsive layout which works on almost all devices. If it does not look well on your website, send me a feedback via any of my social media accounts.
-
In this project, if a thread has more than 1 media, then you can either swipe through it or you can just use the arrow buttons.
-
In this project, as you scroll down and view a Thread with a video, if you have reacted with any element on this page, then you have autoplay for videos enabled and the video will play automatically. Else there will be a play button which you use and play the video. And once you scroll past the video, and the video was still playing the video gets paused.
-
In this project, there is the option of play video again. Here when a video has finshed playing, a popover will appear on top of the video with a Play Again button. Also if the video is finshed and you scroll up or down, once you come back to that video, it will start playing again from start.
-
In this project, for each Thread that has a video, there is a speaker icon on the bottom right of the video container. This helps to mute and unmute each video.
-
In this project, you can like and unlike each Thread and also when you like or unlike a thread, the number of likes counter will increase or decrease by 1.
-
In this project, each Thread has a menu and each Thread has menu icon that is at the top right of each Thread. So if you click on that menu icon, then the menu will show up and if you click on the icon again or any of the options in the menu then menu is hidden.
-
In this project, when you scroll the page and you are getting to the bottom, at the middle of the Feed section, you will see a button which looks like new Threads were fetched. But it just actually scrolls you back to the top when you click on it.
The design for this project was brought by 2 applications which were Thread & Instagram.
The languages I used to build this project were,
- HTML5
- CSS3
- Vanilla JS
- Almost all Icons were gotten from Instagram.com.
- All the videos used in this site were gotten from Instagram.com
- All the usernames used here are usernames gotten from Instagram.com
- Almost all Images were gotten from Instagram.com
- Some Images may belong to NFORSHIFU234 Dev
- The font used was the default font used by Instagram.
I would love to hear what you think about this project 🥲. If you want to give a feedback about this project,
you can reach me through any of the mediums below: