I cloned dev.to with react, firebase, chakraui and more...

click to preview

repo here You could drop a star on my repo if you love it.

How do I get an idea to clone dev.to 🤔

At first, I intended to make a simple comment section to practice react and firebase. But while searching some inspirations on google, I found dev.to and I decided to clone it.

Although I used styled components for styling , I was too lazy to make some styles on my own , so I switched to ChakraUI (A React UI component library).

NOTE: Sorry for using the official logo and copying the random posts on dev.to

Features:

1. CRUD 🫠

Users can create, read, update and delete an article.

Even though all users can read all articles , only authenticated users can create, update and delete article.

I prepared some tags with it's logo. So when you try to add tag in the editor it will show you tag suggesstions. The tag that I haven't prepared will start with #.

I used reactMDE for markdown editor. And I customized it's default style and added 2 custom commands.

The first one inside red border is used for adding code block.

By defaut, image command takes photo url but I replace my second custom command inside red border to upload local image. So if you want to add photo url, you can cancel popup or using the syntax below.

![img_description](image_url)

Saved all contents in localStorage when creating or editing article. So, Your contents will not be lost even if you reload the page.

2. Social authentication 🔒

You can login with 4 options (github, twitter, google and facebook)

Your username will be auto generated after login but you can change it in customize profile page.

3. Giving reactions to articles ❤️‍🔥

(heart, unicorn, save and social share buttons)

All users can share the article but only authenticated users can react to the article by giving heart and unicorn. They can also save the article.

4. User profile 👻

5. Customize profile 🫣

Customizing a personal profile with your data, website, social links and brand color.

6. Dashboard 🫠

You can manage your posts, drafts, following tags, followers and following users.

You can also pin the posts to your profile 📌

7. Top tags 🏷

It will display most used tags in every article and limit is 30 tags.

You can filter posts by tag or search by keyword.

You can also follow the tags and It will show the article related with the tags that you follow in the home page.

8. Comments and nested replies 💬

You can add comments and also reply to other comments.

9. Edit comment

10. Delete Comment

11. Reading List 📚

It will show your saved posts and archives.

You can filter your saved posts with specific tag or search by keyword.

12. Apperance 🎨

You can change light and dark mode

Tech Stacks:

• React

• Chakra UI

• Redux toolkit

• Firebase

• React router

• React MDE

I would love to hear your feedbacks and suggestions 🫡

Feel free to test it out 🤗

Thanks for your time 🤩

Happy Coding 👩‍💻👨‍💻