DEV Community

Cover image for I Created A Simple SMS Site Using MERN Stack
Ethan
Ethan

Posted on

I Created A Simple SMS Site Using MERN Stack

Introduction

Hello! ๐Ÿ˜€

I created a simple social media site using the MERN stack, so I just wanted to show you guys it.
I'm a newbie when it comes to React so it's not something fancy but it's the first thing I created using React. ๐Ÿ˜†


Implementing Signup

Signup Image

I made the Signup form simple. All it requires is a Name, Email and Password.
Next I'm thinking of adding a confirm password field to prevent password confusion, I would also like to make it so that the user has to use a strong password with a mix of numbers and symbols. ๐Ÿ‘€

Once the user is registered they are taken to the signin page.


Implementing Signin

Signin Image

The signin form is pretty standard you log in via email/password. Once the user has signed in the session is managed via a unique JWT token.

Here I would eventually like to implement OAuth.


Implementing Newsfeed

Newsfeed

The Newsfeed page is shown once the user has signed in, it only displays posts from people the user is following.

To the right is people the user hasn't followed yet and gives the user quick access to their profile and/or to follow them.

Posting allows both text and photo. I would also like to implement video support and possibly access to the camera so the user can upload their camera image.

Once a post is submitted the poster can delete the post if needed, other users are able to like the post and comment.


Implementing Profile

Profile

The profile page shows the user's profile, the user can edit their profile and can also delete it.

At the bottom the user can view the posts they have made, who they are following and their followers.

Followers

The ui was made with the help of Material Design. ๐Ÿ˜Ž


Conclusion

Here I have shown a simple SMS site I built using the MERN stack.

I'm pretty new when it comes to frontend stuff, but I had a lot of fun building it. ๐Ÿ˜†
Though I did spend quite a bit of time trying to translate the errors that React somethings throws. ๐Ÿฅด

Once I get better at React I would like to have a go using Tailwind instead of Material Design.
I hope you enjoyed my simple SMS site.

The source code can be found via Github:
https://github.com/ethand91/sample-sms

I also used the following book as a reference to help me build it:
https://amzn.to/3tpN9eY

Although package versions etc, have changed quite a bit. ๐Ÿ˜…
Next I'm thinking of trying to build an online learning platform. ๐Ÿ‘€


Like me work? I post about a variety of topics, if you would like to see more please like and follow me.
Also I love coffee.

โ€œBuy Me A Coffeeโ€

Top comments (3)

Collapse
 
terrinakamura profile image
terrinakamura

Hi, Ethan. This is cool! I'd like to know if you have any websites or apps that are up and running? Could you send me a clickable link to check out? Thanks!

Collapse
 
ethand91 profile image
Ethan

Thank you :) I don't have anything running at the moment but once I've created a couple of samples I'm thinking of setting up a portfolio site to show them off.

Collapse
 
terrinakamura profile image
terrinakamura

Terrific, Ethan. I will look forward to seeing it!