Science says that knowledge is provisional, meaning we never finish learning something.
Here's a link to check the project; you only need a nickname and password!
Of course. You can see its mobile version:
Why Have I done this?
Since I started programming, doing projects on my own helped me to improve my skills, to practice a new tool, to work on specific functionalities, and to do big projects, meaning to challenge me and grow in this field.
This time I wanted a new challenge, a FullStack website since I had never done one before, due to whether I worked on a Back-End project with a simple Front-End or a Front-End project with a simple Back-End. I had this idea in January of 2021, yet I had problems making it work and ended up with forgotten projects. In January 2022, I wished to finish this project, and I'm happy to say I made it work. It's one of my works. I'm very proud of it.
What can you do on this social media App?
On this site, you'll be able to:
Registrate yourself as a user
Login to your account
Check and edit your profile
Post a message on the dashboard
Delete your post
Comment and like posts
You can follow other users
Have a list of the users you're following and the users you follow
See the featured post: This is the most-voted post of the day
And this is how I made the bridges!
Bridges photo by David Martin on Unsplash
The structure I selected for the project was:
--- Client-Folder (Front-End) - On GitHub
--- Server-Folder (Back-End) - On Heroku
--- Database - On MongoDB
On a smaller project, I'd probably hosted both on Heroku, but since this is a big project for both Front-End and Back-End, the folders are two different projects; the server folder is a project, and the client folder is another project. I used npm it for both of them. While the client build runs on Netlify, the server build is on Heroku.
A link connects the Front-End build to the server (REST API) through Redux on the client project. To connect MongoDB, I got my URI and connection string linked to the server project.
MongoDB is the database, and I combined it with Mongoose.
The User Schema:
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const userSchema = new Schema({
login: {
type: String,
required: true,
},
password: {
type: String,
},
followers: [],
following: [],
});
module.exports = mongoose.model("User", userSchema);
The Post schema :
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const postSchema = new Schema({
user: {
type: Schema.Types.Object,
required: true,
},
text: {
type: String,
required: true,
},
likeCount: {
type: Number,
default: 0,
},
createdAt: {
type: Date,
default: Date.now,
},
});
module.exports = mongoose.model("Post", postSchema);
The arrays are storage for users, followers: [] is the hold that a user has on the schema, where you can see all the users that follow this user on the client site.
In the Front-End site, I used
React is the main library I use because it's the tool I've been learning for the last two months. It's a tool I feel comfortable with, and I wanted to improve using it.
Redux, at the beginning of this project, I had some knowledge about Redux. I already had the basics, but to test myself, I wanted to answer the question, "When do I need Redux?" I couldn't have a quick and clear answer, and that's how I wish to improve in this field.
Tailwind CSS: It provides customizable components. It is my favorite for styling because it is quick and easy to use.
Material UI
Infinite Scroll Library: This is an interesting library to make an infinite scroll for the post feed in the principal & the profile screen.
The Front end is composed like this:
In the Back-End, I used the following tools:
NodeJs
Mongoose
Nodemon
Passport
JWSToken
Why those tools? The main reason is that when I was learning about JavaScript, I found that the community recommended the MERN technology stack as one of the most interesting to go along with React, the first framework on which I decided to focus. That's how I learned the node databases and MongoDB, the first non-relational database I used. This project made me get a better understanding of all these tools.
The Back-End is composed like this:
Building this project took me about two weeks. I think it completed its objectives, which were:
To help me improve Redux
To help me improve my knowledge of Back-End and understanding of Node and MongoDB
And the most important it was to make me enjoy working on ambitious projects on my own.
Here you can check an article about a Front-End project that lead me to do this FullStack App.
I learned much working on this and would like to continue its development. There are many features I'd like to add to make the app better. I'm open to comments and suggestions!
Gonzalo Simon