Build Dev.to Clone in ReactJS

#react #javascript #webdev #tutorial

Hey guys,

Today, I'm feeling so grateful for this DEV community. From the last few months this community gave me lot's of support. So in return I wanted to share something.

I have build this clone of this Dev.to. (Home page only)

Demo Link: https://devto-clone.vercel.app/

This clone has lot's of good features like in the dev,
Such as,

Infinite Loading
Skeleton UI etc.. It is mobile responsive.

Things that I have used to build this clone,
-- ReactJS (React hooks)
-- react-icons package
-- Sass for styling

I have also created tutorial, You can find it here:

Follow whole tutorial and you can learn lot's of things like,

-- Setting Layout
-- Creating Hamburger Menu
-- Getting data from API
-- Creating Skeleton UI
-- Infinite Loading
-- Mobile Responsive
-- React Hooks
-- Sass styling
-- Advanced Conditional Rendering etc.

You can find Full-Code from here.

Please share your valuable review!

All suggestions are welcome!

Thanks For Reading and Supporting.😄

Feel free to visit my youtube channel:

@CodeBucks

Follow me on Twitter where I'm sharing lot's of useful resources!

@code.bucks 😉

Note: This clone is for educational purpose only.

Top comments (24)

Gustavo Scarpim • Mar 12 '21 • Edited

Nice work, is cool!!
One problem, your dropdown-menu It is misaligned:

Besides, it's perfect!! Congrats!!

CodeBucks • Mar 13 '21

Hey. Thanks for pointing that out! I will fix it. ^_^

Ashish R Bhandari • Mar 16 '21 • Edited

Hii,
The site looks awesome,
Great Job,
A small changes from my end.
A small Minimal CSS changes will make the things look good.

margin: 0 auto; // This will make your container be in center

.headerContainer {
    margin: 0 auto; 
    max-width: 1280px;
}
.main-container {
    margin: 0 auto;
    max-width: 1280px;
    padding: 1rem 0rem;
}