This content originally appeared on DEV Community and was authored by Safak
Hi friends, I'm Safak. I am a full-stack web developer and I'm sharing open source web projects on my dev blog and their tutorials on my YouTube channel. I've shared 3 full-stack projects so far and I want to share my 5 hours "Full Stack Video Sharing App" tutorial for free. You can find the playlist here.
What technologies are used?
Backend:
Node.js Express Framework
Database:
MongoDB, Firebase
Auth:
JWT, Cookies, Firebase Google Auth
Front-End Framework:
React.js with hooks
UI library:
Styled Components
State Management Library:
Redux
File Storage:
Firebase Storage
Design Part of the Video Sharing App
In this part, I've designed a YouTube-like video sharing app using React.js functional components, hooks and Styled Components. For the layout I preferred using Flexbox.
The app includes 4 pages and 7 small components.
-
src
-
pages
- Home.jsx
- Search.jsx
- Video.jsx
- SignIn.jsx
-
components
- Card.jsx
- Comments.jsx
- Comment.jsx
- Menu.jsx
- Navbar.jsx
- Recommendation.jsx
- Upload.jsx
-
pages
Full Stack Part of the Youtube Clone
In this part of the video, I've created an API using Node.js Express server with a MongoDB connection. Then created necessary models, routes and controllers in order to handle CRUD operations.
-
root
-
models
- User.model.js
- Video.model.js
- Comment.model.js
-
routes
- auth.js
- users.js
- videos.js
- comments.js
-
controllers
- auth.controller.js
- user.controller.js
- video.controller.js
- comment.controller.js
-
models
As you realize, there is an additional route and controller to take care of user authentication. To provide a security I've used bcryptjs and JWT library with cookies in the auth controller.
export const signin = async (req, res, next) => {
try {
const user = await User.findOne({ name: req.body.name });
if (!user) return next(createError(404, "User not found!"));
const isCorrect = await bcrypt.compare(req.body.password, user.password);
if (!isCorrect) return next(createError(400, "Wrong Credentials!"));
const token = jwt.sign({ id: user._id }, process.env.JWT);
const { password, ...others } = user._doc;
res
.cookie("access_token", token, {
httpOnly: true,
})
.status(200)
.json(others);
} catch (err) {
next(err);
}
};
And finally, I've combined the API with the UI Design in order to make the application dynamic. To fetch data and make other API requests axios was used and to handle state management, I preferred using redux-toolkit.
I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check out my channel and other posts.
Other Dev.to Posts
🛍️ Full Stack E-Commerce App (+8 Hours free tutorial)
đź“ş Full Stack Netflix App (+7 Hours free tutorial)
🧑‍🤝‍🧑 Full Stack Social Media App (+7 Hours free tutorial)
Lama Dev
🔥 Lama Dev YouTube Channel
⚡️ Lama Dev Facebook
đź‘ľ Source Code
This content originally appeared on DEV Community and was authored by Safak
Safak | Sciencx (2022-07-17T11:35:59+00:00) Full Stack Youtube Clone (5 hours free tutorial). Retrieved from https://www.scien.cx/2022/07/17/full-stack-youtube-clone-5-hours-free-tutorial/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.