DEV Community

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

Build Dev.to Clone in ReactJS

codebucks profile image CodeBucks ・Updated on ・1 min read

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 Instagram where I'm sharing lot's of useful resources!

@code.bucks πŸ˜‰

Note: This clone is for educational purpose only.

Discussion (23)

pic
Editor guide
Collapse
guscarpim profile image
Gustavo Scarpim • Edited

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
asharry97 profile image
Ashish R Bhandari • 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;
}
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
stokry profile image
Stokry

Nice work!

Collapse
anggachelsea profile image
Angga Lesmana

Wow thanks Sir . This good reference

Collapse
codebucks profile image
CodeBucks Author

You're welcome! πŸ˜‡

Collapse
lineldcosta profile image
lineldcosta

Good one.

Collapse
thomasbnt profile image
Thomas Bnt

Good job!

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
andrewbaisden profile image
Andrew Baisden

Like it!

Collapse
kwizera123 profile image
Kwizera123

Nice work βœ”οΈ

Collapse
rexyandrian profile image
Rexy Andriansyah

Great work

Collapse
codebucks profile image
CodeBucks Author

Thanks! ^_^

Collapse
asyncnavi profile image
Navraj Sandhu

Great thanks

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
hasib profile image
Hasib Muhammad

Good Job πŸ‘

Collapse
codebucks profile image