DEV Community

Cover image for Build Dev.to Clone in ReactJS
CodeBucks
CodeBucks

Posted on • Updated on

Build Dev.to Clone in ReactJS

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.

Discussion (24)

Collapse
guscarpim profile image
Gustavo Scarpim • Edited on

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

Besides, it's perfect!! Congrats!!

Collapse
codebucks profile image
CodeBucks Author

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

Collapse
aashishrbhandari profile image
Ashish R Bhandari • Edited on

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;
}
Enter fullscreen mode Exit fullscreen mode

Adding this both in proper order or adding it in Inline Styling will help u achieve the below results.
Small CSS Changes To Center the Header & Main Container

Collapse
codebucks profile image
CodeBucks Author

Hey, Thanks for the suggestions! ^_^

Collapse
ben profile image
Ben Halpern

This is cool!

Collapse
jaagrav profile image
Jaagrav

Do you have any plans to refractor dev.to's code to react?

Collapse
adnanaslam profile image
Adnan Aslam

Great Effort

Collapse
choryfdieg profile image
Diego Fdo

Wow ! Very good work, thanks for sharing

Collapse
codebucks profile image
CodeBucks Author

You're welcome! πŸ˜‡

Collapse
kwizera123 profile image
Kwizera123

Nice work βœ”οΈ

Collapse
andrewbaisden profile image
Andrew Baisden

Like it!

Collapse
asyncnavi profile image
Navraj Sandhu

Great thanks

Collapse
lineldcosta profile image
lineldcosta

Good one.

Collapse
rexyandrian profile image
Rexy Andriansyah

Great work

Collapse
codebucks profile image
CodeBucks Author

Thanks! ^_^

Collapse
anggachelsea profile image
Angga Lesmana

Wow thanks Sir . This good reference

Collapse
codebucks profile image
CodeBucks Author

You're welcome! πŸ˜‡

Collapse
bertmeeuws profile image
Bert Meeuws

Looks good! I was going to make a clone with a redesign too; what's next? Connecting a server with auth/db?

Collapse
codebucks profile image
CodeBucks Author

Hey Thanks! Right now I haven't thought about connect it with any backend. If you want then you can try it. πŸ˜‰

Collapse
stokry profile image
Stokry

Nice work!

Collapse
thomasbnt profile image
Thomas Bnt

Good job!

Collapse
farhanroy profile image
Farhan Roy -- | 😁

is so good ui

Collapse
hasib profile image
Hasib Muhammad

Good Job πŸ‘

Collapse
codebucks profile image
CodeBucks Author

Thanks!