DEV Community: rohanjsx

Brush up map, filter and reduce in 5 minutes

rohanjsx — Tue, 12 Apr 2022 03:28:43 +0000

Map, reduce, and filter are all array methods in JavaScript. Each one iterates over an array and performs a transformation or computation and returns a new array based on the result of the function.

Map

map method is used to create a new array from an existing one by applying a function to each element of the existing array.

The callback function takes 3 arguments:

current element
index
the actual array

Polyfill for map() :

Filter

filter method takes each element in an array and applies a conditional statement against it. If the condition is fulfilled, only then the element is pushed to the result array.
The callback function for filter takes the same 3 arguments as map();

Polyfill for filter() :

Reduce

reduce method reduces an array of elements down to a single output value. reduce() takes 2 arguments: the callback function & an initial value. If the initial value is not provided by the user, the first element of the array is taken as the initial value. The callback function takes 4 arguments:

accumulator (result of previous computations)
current element
index
the actual array

Polyfill for reduce() :

Example to sum it up:

Build a Login/Signup Page with React & TailwindCSS

rohanjsx — Sat, 02 Apr 2022 14:19:45 +0000

A Login/Signup page is something you will find in every modern application whether it is an E-Commerce website or a Social Media application. In this beginner-friendly tutorial, we will build a simple Login/Signup page where you the user can toggle between Login and Signup with a single click.

Prerequisites:

React Hooks (Basic)
CSS (Basic)

App Setup

Follow this doc to setup React app with TailwindCSS. This will take around 1-2 minutes. Once done, create a 'pages' folder in the 'src' directory and create a 'Login.jsx' page in the folder. For now, we will simply return the Login component and render it from our App.jsx as such:

Later, you can implement routing in your App and render it as such:

Design Login Form

In our Login page, let's create state variables for our inputs and to toggle between Login & SignUp forms:

When isLogin is true, we will display the Login form and when it is false, we will display the SignUp form. Let's go ahead and style the Login form!

Let's go ahead and style them as such:

Our Login form can be divided into 4 parts:

Top (consisting App name and Sign In text)
Social Icons container
Inputs & Submit button
Bottom info paragraph with toggle

Let's add a custom style for our socialIcon in the 'index.css':

Let's finish up by styling our inputs and the bottom section where we will add an onClick handler so that we can switch from 'Login' to 'Signup' on clicking the 'Create Account' paragraph.

Let's put it all together and create our LoginForm component:

Similarly, we can go ahead and create our SignUp form component and customize it as per our need. For now, we will add an Username and an Avatar URL input field and change the background color for our SignUp Form:

To put it all together, we need to conditionally render the Login/Signup form based on the isLogin state as such:

And just like that, we have our Login page setup where the user can switch between Login & Signup with a single click!
Feel free to customize it as your own and add animations and your app logo!

Resources:

TailwindCSS
React Hooks
Code Gist

Build A MERN Stack App in 5 Days (Day 5: Finishing Up)

rohanjsx — Wed, 30 Mar 2022 03:28:03 +0000

Hello & welcome to the final chapter of this series!
In the previous parts,we:

Setup the backend
Designed the stateless components in the frontend
Setup Redux & Firebase Auth
Connected our frontend to backend to add & fetch questions.

The only functionality remaining to complete our app is to 'Add Answer'. So, in this tutorial we will:

Add axios request to 'Add Answer'
Create a Modal to 'Add Answer'
Design our Posts component and Feed
Conclusion

Design the Feed

The post component in our final version of the app looks like this:

Upon clicking the 'Answer' button, we want a Modal to pop-up with an area to write our answer and submit it. So, let's setup our app accordingly. Let's go ahead and make a request to fetch all the posts from our backend in our 'Feed' and pass them as props to the 'Post' component as such:

Let's design the 'Post Component'! As we saw in the image above, our Post component can be divided into 4 parts:

Top (containing User avatar and name)
Middle (containing the Question, the Answer button & Image'
Buttons (Utility buttons for Like, Dislike, Share, Comment
Button to toggle show/hide answers

We will be using the 'react-quill' , 'react-time-ago' and 'react-html-parser' libraries in the Post component. Additionally, we need to create a function to handle answer submission:

Additionally, we will have state variables to control our state:

Now, we can go ahead and design the Post component:

Now, if we click on the 'Answer' button we will have our Modal pop-up with our quill where we can submit our answer!

Conclusion

And with that, we have a fully-functional MERN stack social app with the functionalities of Add Question, Add Answer & Google Sign-In! Feel free to build upon this prototype and add your own features and fully customize this app and turn it into a complete social application!

Features to improve the App:

Add a Categories model & filter Posts by Category
Add features to like, comment and share
Add features to fetch all posts from a specific user

Resources

Hope you had fun & learned something new in this 5-part series!
Thank you for reading along!

Build A MERN Stack App in 5 Days (Day 4: Connecting to the backend)

rohanjsx — Tue, 29 Mar 2022 04:02:00 +0000

Hello and Welcome to Day 4!
Up to this point, we have setup our backend, designed the Sidebar, Header & Widgets components and implemented Login & Logout functionalities for our user with Redux & Firebase Google Auth.

Today, we will:

Design 'Modal' to Add Question
Make request to backend to add question to DB

Let's get started!

Add Question

Our Question has 3 fields: description, imageUrl (optional) and user. The user field will be accessible from our Redux global store once the user signs in. Then, we want to display a 'Modal' once the user clicks on the 'Add Question' button in the Header where the user can enter the description & imageUrl and submit the question. Let's go ahead and:

Install the dependencies we will use today
Add a proxy to our backend server in 'package.json' in client
Create states to keep track of input fields:

Note: You can use any library of your choice to create the modal or create a custom 'Modal' component yourself

Let's create the function to make the request to the backend to submit our question:

Design the Modal

On clicking the 'Add Question' button, we set the 'isModalOpen' state to true and display our modal:

Our final version of the Modal in the app looks like this:

It can be divided into the following sections:

Top (containing the texts Add Question & Share Link)
Middle (containing Avatar and Dropdown)
Inputs & Image Preview
Buttons to Submit Question & Close Modal.

Let's go ahead and test our Modal!
Run 'npm start' in the terminal from the 'client' directory.
The app should run on localhost:3000. Login and click on the 'Add Question' button and the Modal should pop up! Go ahead and Add a Question.

If we go and check our MongoDB database,we see that the Question has been added to our database successfully!

With the 'Add Question' functionality out of the way, the only functionality we are missing is to 'Add Answer'.

In the next and final part of the series, we will:

Add functionality to Submit Answer
Design our Feed
Polish and wrap up our application!

Homework

Design your own custom Modal component
Add a custom alert to display 'Question Added' when you submit the question

See you in the final part!

Build A MERN Stack App in 5 Days (Day 3: Setting up Redux & Firebase Login)

rohanjsx — Mon, 28 Mar 2022 04:18:17 +0000

Welcome to Day 3! In the previous two parts, we have set up our backend and designed the Header, Sidebar & Widgets components in our UI. Before we design the Feed component, we need to implement User Authentication so that we can fetch our posts from the database. What we'll do today:

Implement Firebase Google Auth
Setup Redux
Add Login & Logout functionalities

Firebase Auth

Head over to https://console.firebase.google.com/u/1/ and 'Add project'. Name your project and Create a new 'Web' application and copy/paste the SDK configuration.

Go to the 'Authentication' tab and in the 'Sign-in methods',enable Google . Go ahead and install Firebase in the 'client' directory by using 'npm i firebase'. Create a file named 'firebase.js' in the 'src' folder and copy paste the Firebase configuration alongwith some other imports as such:

Redux

Go ahead and install 'react-redux' and '@reduxjs/toolkit'. Create a folder called 'features' in the src directory and create a new file called 'userSlice.js' in the features folder. This file will include the reducers and actions, namely login and logout for our user. In the userSlice.js:

Create a 'store.js' file in the src directory where we import our userSlice and initialize the global store, so that we can use it anywhere in our app and avoid prop drilling!

With our global Redux store & Firebase Auth set up,all that's left to do is create a Login page which will leverage the Firebase Auth to enable User Login and fill our global user object.

Login

In the 'pages' directory, create a 'Login.jsx' file. For now,it will be a simple page with a Logo and a Login Button. Feel free to customize it as per your needs and add more Authentication Providers!
Let's create a 'handleLogin' utility function which will do just what it's name suggests.

Now,in our App.js let's render Login page/Home page depending upon the user's auth state. The user can visit the 'Home' page only after they have logged in.

Logout

With the Login functionality done, lets add an option to Logout when the user clicks on their Avatar in the Header. Head over to 'Header.jsx' in the 'components' directory.

With our login & logout functionalities implemented, in the next part we will add functionality to Add Question and Fetch Question from our database and render it in the Feed component, making our application fully functional.

Homework

Add more Providers for Login (Github/Facebook)
Customize the Login page

References

Code Repo
Redux Toolkit
Firebase

See you in the next part!

Build A MERN Stack App in 5 Days (Day 2: Getting started with the Frontend)

rohanjsx — Sun, 27 Mar 2022 07:59:34 +0000

Hello and welcome to part 2!
In the previous part, we setup our backend server, created our models and routes and connected to our MongoDB database. In today's part, we will:

Setup React + Tailwind CSS
Setup the folder structure for our frontend
Create the Header, Sidebar & Widgets components

Prerequisites:

CSS Flexbox
TailwindCSS (Basic)
React (Basic)

This is what the 'Home' page on our final version of the app looks like:

It is mobile responsive and we can divide the page into 4 sections:

Header
Sidebar
Feed
Widgets

Setup

To setup the frontend project, navigate to the 'client' folder and follow this short & concise doc to setup the boilerplate for a basic React App with Tailwind CSS . This will take about 1-2 minutes.

Once done, navigate to the 'src' folder and go ahead and delete the files we won't be needing, only keep the following files in the 'src':

App.js
index.js
index.css

Make sure to delete the code in all three files and we shall start from scratch! This is what these 3 files should look like:

App.js

index.js

index.css

Now, go ahead and create two folders in the 'src' directory, namely 'components' and 'pages'. In the components folder, create 4 new files, namely 'Header.jsx', 'Sidebar.jsx', 'Widgets.jsx' and 'Feed.jsx' and for the time-being, initialize them as such:

Do the same for Sidebar, Header and Widgets components and import them in the new 'Home.jsx' file in the 'pages' directory:

Go ahead and export the 'Home' component in the App.js in 'src' and render them as such:

Run 'npm start' in the terminal once you are in the 'client' directory and this is what our site looks like for now:

Let's apply some Tailwind utility classes to our 'Home' to align the items properly and setup our layout as follows:

Now, let's go ahead and style the individual components one by one. We will go over the Header component in detail, applying Tailwind utility classes and discuss adding custom Tailwind classes. We will discuss the Sidebar & Widgets components in brief. Later, you can go ahead and apply your own styles and make the application your own. Let's get started with the Header!

Header

Before we start coding the header, we need to install two packages: @material-ui/core and @material-ui/icons which we will use for the icons and components like Button, Input, Avatar in our application. Alternatively, you can use '@headless-ui/react' and '@heroicons/react' for this purpose.

Our Header will be divided into 3 sections:

Left (Our logo)
Center (Icons & Searchbar)
Right (Avatar & Add Post button)

We need to apply 'flex' to our Header to align the items in a row and in the meantime let's apply some styling to our logo, feel free to replace this with an image of your app logo.

Next, we are gonna create our first custom TailwindCSS class to style our header icons, head over to index.css and add the following:

Let's add the Avatar and 'Add Question' button and style it up to finish our Header design.

In the same way, let's style our Sidebar and Widgets!

Sidebar

In the 'components' folder, create a SidebarItems.jsx file and import it into the Sidebar.jsx fil and style it as such with some more custom TailwindCSS classes!

Widgets

Similarly, for the Widgets component, let's create a WidgetContent.jsx file and style it with custom TailwindCSS classes and import it in the Widgets.jsx!

Final Touches

As of now, the Feed seems to be of around the same width as Sidebar and Widgets components. However, we want the Sidebar and Widgets to each take up 20% of the screen on large screens and the Feed to take up 60% of the screen. In smaller screens, we want the Sidebar and Widgets to be hidden and the Feed to take up the entire space. Keeping that in mind, we apply the following styles:

In the next part of the series, we will implement Firebase Google Auth and Login and then make requests to our backend to Add and Fetch posts from our database and create the Feed!

Homework(Suggestions to practice)

Replace the logo in the 'Header' with your own custom logo.
Replace the multiple divs in the SidebarItems component by mapping over an array to make the code cleaner. (Plus points if you fetch this data from some API)
Do the same for the Widgets Component!
Use headlessui + heroicons instead of Material UI

Resources

TailwindCSS
Icons
Code Repository

See you in part 3!

Build A MERN Stack App in 5 Days (Day 1: Setting up the backend)

rohanjsx — Sat, 26 Mar 2022 04:59:20 +0000

Hello! Welcome to part 1 of the series.. Today, we will:

set up our backend
connect to MongoDB
create Models
create Routes & their functions (controllers)

Prerequisites: Basic knowledge of Express & MongoDB

Before we get to coding, let's plan out our models so that we are all on the same page. The two main models for our application will be: Questions and Answers.

Every Question will have a:

description
imageURL (optional)
answers
createdAt
user (the user who submitted the question)

Every Answer will have a:

answer (the actual answer submitted by the user)
questionID (id of the question it is answering)
createdAt
user (the user who submitted the answer)

Okay, so let's start coding!
We will have two separate folders: client & server . The 'client' folder will contain our frontend code and the 'server' folder will include our backend code. Today, we will be working in the server directory so make sure you are in the correct directory! Once we are in the server directory, we'll need to initialize our package.json with npm init and install the dependencies. Our dependencies will be:

Express: Our server framework
Mongoose : To communicate with our MongoDB database
CORS: Middleware used to enable CORS with various options.
BodyParser: Middleware for parsing incoming request bodies.
Dotenv: To load our environment variables in development.

So, go ahead in your terminal once you are in the server directory

Models

Let's go ahead and code our Models! Create a separate folder called 'models' in the server directory and create two separate files: QuestionModel.js and AnswerModel.js and let's go ahead and code our models as we discussed earlier.

Routes

With our models ready, next we need to setup our routes and their controllers. For now, we will have three controllers:

Add Question : triggered upon a POST request to the route '/api/questions'. Takes in the fields description, imageURL, user from the request body and adds the new question to the database.
Add Answer : triggered upon a POST request to the route '/api/answers'. Takes in the fields answer, questionID, user from the request body and adds the new answer to the database.
Get All Questions : triggered upon a GET request to the route '/api/questions'. Returns all the questions in the database alongwith all their answers.

So, create a new folder called 'routes' in the server directory with two files: QuestionRoutes.js & AnswerRoutes.js.. QuestionRoutes will contain Add Question & Get All Questions while AnswerRoutes will contain a single controller for now which is Add Answer. So, go ahead and in QuestionRoutes.js :

And in AnswerRoutes.js :

Go ahead and create an index.js file in the 'routes' folder and import all our routes:

Connect to MongoDB

Now, with our Models & Routes set up ,let's go ahead and actually connect to our database. We will be using Cloud MongoDB Atlas for our database, so go ahead and login/register on cloud.mongodb.com and 'Add New Project' > 'Create a Database':

The cluster provisioning takes around 3-5 minutes. In the meantime, go to the 'Database Access' tab and 'Add New Database User', after that go to the 'Network Access' and add the IP Address '0.0.0.0' to the IP Access List!

Once the cluster is provisioned, click on 'Connect' > 'Connect your MongoDB application' and copy the connection string,this will be our MongoURI:

Now create a '.env' file in your the server directory and:

Make sure to replace the 'password' field with the password for your user and 'myFirstDatabase' with the name of your database!

Now, go ahead and create a 'db.js' file in the 'server' directory where we will write a function to establish connection with our database.

Putting it all together

So far, we have:

Created our Models
Created our Routes
Setup MongoDB

Now, let's go ahead and put it all together for our backend, where we create an 'index.js' file which will be our main file in the server directory, where we will listen on our server, setup middlewares and connect to our database!

In the final step, we need to add a 'start' script in our package.json:

Now, go ahead and type 'npm start' in the terminal to start our server and if everything is done right, we should see:

Additional | Testing with Postman

Go ahead and test the routes with Postman or your favorite API Testing tool.. Try adding some dummy data and make sure it populates the database.

Conclusion

So today, we setup our backend, our models, routes, connected to MongoDB and started our server. Join in for part 2 where we start working on the frontend and setup React + TailwindCSS

Homework

Unlike most coding tutorials where the reader has to just copy paste the code, in this tutorial I just wanted to show the exhibit functionalities and leave ample space for the reader to add more additional assignments of their own, where the reader can improve upon the app and add functionalities of their own and learn by practice.. Some functionalities you can add:

Create a 'Category' model or add a 'category' field to Questions and add a route to get Questions according to category.
Make the answer route protected i.e. allow access to the route only after user is authenticated. You can use 'passport' or some other package for this.

Code repository
Feel free to fork and add your own touch to the project!
Reach out to me for any issues/queries.
See you in Part 2!

Build a MERN Stack App in 5 Days (The Introduction)

rohanjsx — Fri, 25 Mar 2022 16:10:12 +0000

What we will create: Kysymys - A MERN Stack social question and answer site similar to Quora with functionalities of User Authentication, Posting a Question, Submitting Answers to Questions, etc.

What tools will we be using: React for frontend + TailwindCSS for styling, MongoDB for database, NodeJS + Express for backend server, routing and communicating with the database and Firebase for Google Authentication.

Trying to make the switch from frontend/backend to full-stack? Or just looking to have fun and sharpen up on your dev skills? Then come along and join the 5-part series where we go over the planning, coding (and debugging) of a MERN Stack Application from scratch.

This series is meant to be a beginner-friendly introduction to the MERN stack to devs who are acquainted with React and NodeJS, have worked on the technologies independently but are unable to connect it all together to complete the puzzle to build a full stack application. With ample space to add more functionalities and completely customize the app, upon completing this 5-part tutorial ,you will be confident in your skills to code a complete MERN stack application from scratch and take your dev skills to the next level!

Part 1