I clone dev.to using React, Firebase, ChakraUI and more...
Tags: react, redux, firebase, chakraui
Published: 2023-03-01 04:15:07

[click to preview](https://dev-community-clone.vercel.app/)

[repo here](https://github.com/zwelhtetyan/dev-community) `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](https://reactjs.org/)** and **[firebase](https://firebase.google.com/)**. But while searching some inspirations on google, I found dev.to and I decided to clone it. 

> Although I used [styled components](https://styled-components.com/) for styling , I was too lazy to make some styles on my own , so I switched to [ChakraUI](https://chakra-ui.com/) (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 `#`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88ew081xj6eampybars4.png)

I used [reactMDE](https://www.npmjs.com/package/react-mde) for markdown editor. And I customized it's default style and added 2 custom commands.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j7z52f9theso68039jm.png)

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*)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dbcil1ufbpm68mr4eiv.png)

> 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*)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8vztf60st0hx0xtx5rg.png)

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 👻

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oifqe2krk30hggoq619z.png)

### 5. Customize profile 🫣

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hu479hhut63x9dvs72vl.png)

### 6. Dashboard 🫠

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgun5urgesfdrq500rmb.png)

> 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l0695qe460j8tasswxn.png)

> 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 💬

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oe8wqeolnihqhmyzj0bg.png)

> You can add comments and also reply to other comments.

### 9. Edit comment 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btro2v87t78byjeh27b5.png)

### 10. Delete Comment

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h0e814gmdm254p4uzmc.png)

### 11. Reading List 📚

It will show your saved posts and archives.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo5vhmac9azcoag153q8.png)

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

### 12. Apperance 🎨

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkue7cgqkg7sz1o31q3g.png)

> You can change light and dark mode 

### Tech Stacks: 

- [React](https://reactjs.org/)

- [Chakra UI](https://chakra-ui.com/)

- [Redux toolkit](https://redux-toolkit.js.org/)

- [Firebase](https://firebase.google.com/)

- [React router](https://reactrouter.com/en/main)

- [React MDE](https://www.npmjs.com/package/react-mde)

*I would love to hear your feedbacks and suggestions* 🫡

`Feel free to test it out 🤗`

Thanks for your time 🤩

**Happy Coding** 👩‍💻👨‍💻