DEV Community: Thomas Cansino

[DAY 118-122] I learned full-stack by building my 2nd app

Thomas Cansino — Mon, 30 Sep 2024 11:14:14 +0000

As a self-taught developer, one of the best ways to improve my skills is by building. Recently, I completed my 2nd full-stack app that manages tasks with user authentication.

The app I built is designed for authenticated users to create, edit, and manage their daily tasks. It’s a full-stack project built with the MERN stack: MongoDB, Express, React, and Node.js.

In this project, once a user registers, they can log in and their credentials are authenticated through a token system. This token is validated by a backend middleware, ensuring that only authenticated users can interact with the application.

The validateToken middleware verifies the token, and if it’s correct, it allows the user to proceed; otherwise, it denies access.

Although the CSS for the frontend is not fully finished yet, the backend and the database are 100% complete. The next step is to refine the design and improve the user interface.

One of the most important features of the app is task management. Users can register, log in, and then create tasks that are displayed based on selected dates. The tasks can be modified and deleted as needed.

For instance, if I create a task at 5 p.m., I can later modify the time, date, task name, or even delete it altogether. The tasks are organized and displayed starting from the earliest time of day to the latest time of day.

I also implemented previous and next buttons, allowing users to navigate between tasks. When there are more than seven tasks, they are grouped into pages, and the tasks are automatically sorted across multiple pages.

Another key feature is the logout function. Once logged out, the token is removed, and the user is redirected to the login page. This ensures that unauthorized users cannot access the task management area without valid login credentials.

In the backend, I’ve structured the app so that only the user who created the tasks can access and manage them. This was achieved by associating each task with a user ID in the MongoDB, making sure that tasks remain private to the user who created them.

The user model I created also ensures that email addresses are unique, preventing the creation of duplicate accounts.

The application consists of several components:

The dashboard consists of the interactive calendar and the task components:
task form for creating tasks
task modal for deleting and editing tasks
The login, register, and forgot password components.
The private route component to ensure that certain parts of the application, like the dashboard, are only accessible to authenticated users. This was done using middleware to validate tokens before allowing access to these private routes.

On the backend, I used Mongoose to integrate MongoDB as the database. The routes are protected by the middleware, ensuring that only authenticated users can create, read, update, or delete tasks.

While I’m pleased with the progress I’ve made, there’s still work to be done. The frontend CSS is still incomplete, and I plan to refine the design in the near future.

However, I’m already thinking ahead to my next project. My next goal is to build a contact management app with user login functionality. This will be another full-stack project where I continue practicing my skills in creating user-specific content.

The reason I’m building these apps is to practice the core logic, patterns, and concepts of the MERN stack.

By repeating similar types of projects, I’m becoming comfortable with the entire development process from setting up the database to creating secure backends and responsive frontends.

Every project helps me practice my skills and prepare for more complex apps in the future.

Anyways, that’s all for now. More updates in my next blog! See you there!

[DAY 113-117] I built 5 backend projects to acquire a backend certificate

Thomas Cansino — Tue, 17 Sep 2024 08:07:05 +0000

Hi everyone! Welcome back to another blog where I document the things I learn in web development. I do this because it helps retain the information and concepts through active recall.

I completed the backend course in freecodecamp and acquired the certificate by building the 5 required projects.

I built all the projects using Node and Express.

The first project I built is a timestamp microservice where you enter the route /api/:date?, and it responds with a JSON object containing unix and utc properties corresponding to the provided date parameter.

If the entered route contains an invalid date or an invalid Unix timestamp, it responds with a JSON object containing an error property.

If no date is provided in the route (since the parameter is optional), it responds with a JSON object containing unix and utc properties corresponding to the current date.

The next project is a request header parser microservice where you enter the route /api/whoami, and it responds with a JSON object containing the IP address, language, and software of the current user.

The 3rd project is a URL shortener microservice where you enter a valid URL (must include http or https), and it responds with a JSON object containing the original_url and a short_url. The short_url is generated based on the stored value in the database.

I created a database where all previously entered URLs are stored, each assigned a short_url starting from 1. New URLs will be assigned a short_url that increments from the last number in the database.

The fourth project is an exercise tracker where you must first create a user, who will be stored in the database. The ID of the created user will then be used to add exercises, which are also stored in the database. These exercises are exclusive to the user entered in the form.

Additionally, you can view exercise logs to retrieve a list of the user’s exercises and see how many exercises a particular user has. You can also input date range parameters to retrieve the user's exercises within a specific timeframe.

For the last project, I built a file metadata microservice where you upload a file, and upon uploading, it responds with a JSON object containing the file's name, type, and size.

I used the Multer package in Node to read the file's information.

Overall, these five projects were simple but valuable for practicing my backend skills. They pushed me to take on more challenging projects and gave me the momentum to continue my path as a full-stack developer.

My next projects will be full-stack apps using MERN (Mongo-Express-React-Node) and practice everything I’ve learned so far. My goal is to keep learning full-stack development by building more projects in the future.

Anyways, that’s all for now. More updates in my next blog! See you there!

[DAY 108-112] I built my first full-stack app with CRUD and auth logins

Thomas Cansino — Mon, 09 Sep 2024 05:59:51 +0000

Hi everyone! Welcome back to another blog where I document the things I learn in web development. I do this because it helps retain the information and concepts through active recall.

On days 108-112, I built a simple blog website that create, read, update, and delete posts with authenticated user login (username, email, and password).

I used MERN (MongoDB, Express, Reactjs, Nodejs) stack to build the full-stack app from scratch and the purpose of doing it is to practice everything that I've learned so far.

In fact, I plan to build more simple full-stack apps like this to further practice my skills in everything. Learn by doing.

I gotta say, I took a 3-week break from learning the course in freecodecamp because after consistently doing this for almost 5 months, I felt like I needed it.

During my break, I built a blog website as my first full-stack project.

In those 3 weeks, I learned about the backend, and how to integrate it with the database, and practiced my frontend skills.

I didn’t focus too much on the design of the website but rather on the backend and the database side since that's where I think I needed practice.

I learned so much building my first full-stack project and I plan to do more in the upcoming weeks.

For my next projects, I plan to build a task manager (like a to-do list app) with a user login, and a contacts manager with a user login.

My goal is to practice my full-stack skills and learn more by doing these simple projects.

Also, I’ve decided to return to freeCodeCamp and continue the Backend + Database course to earn the Backend Certificate.

After this, I’ll be building more full-stack projects to further practice my skills.

As I resumed the course, I covered the MongoDB and Mongoose topic, where I learned how to connect a database to my backend using Mongoose.

Some basic syntax was taught, but I noticed that some of it seemed outdated, as I’ve already used Mongoose in my first full-stack app, and some of the code I used were slightly different.

Anyway, next week, I’ll be building the 5 backend projects required to complete the course.

That’s all for now. More updates in my next blog! See you there!

[DAY 105-107] I built a contacts manager using Node.js & Express

Thomas Cansino — Wed, 14 Aug 2024 16:00:00 +0000

Hi everyone! Welcome back to another blog where I document the things I learned in web development. I do this because it helps retain the information and concepts as it is some sort of an active recall.

On days 105-107, I focused on expanding my knowledge of Node.js and Express by working on a simple project: a contacts manager. This project allows me to create, read, update, and delete contact information, which helped me practice my backend development skills.

I started by setting up a backend project from scratch and creating an Express server. This provided the foundation for my application. I also learned how to configure and use Thunder Client to test my API endpoints, ensuring everything was working correctly.

I then set up routes using Express Router to handle various HTTP requests for CRUD operations. This allowed me to manage contact data effectively.

Additionally, I explored middleware in Express to handle requests and responses more efficiently.

Finally, I integrated MongoDB using Mongoose. This made interacting with the database much simpler by providing an easy way to define data models and perform operations.

Focusing on backend development is a big step as it will set me apart when applying for junior roles in the future. This project was a good experience in enhancing my backend skills and preparing for more challenges ahead.

Anyways, that’s all for now. More updates in my next blog! See you there!

[DAY 102-104] I took a backend course in freecodecamp

Thomas Cansino — Mon, 12 Aug 2024 16:00:00 +0000

On days 102-104, I started the backend course in freecodecamp and learned the basics of using npm and Node.js with Express.

First, I learned about npm (Node Package Manager) and how to work with the package.json file. This file manages the project's metadata and dependencies.

I started by initializing a new package.json file using npm init, which set up the basics for my project. This allowed me to add and manage dependencies efficiently with commands like npm install .

These dependencies are then listed in the package.json file, making it easy to share and collaborate on projects.

I also explored how to update and remove packages, ensuring my project stays up-to-date and clutter-free.

Next, I explored the basics of Node.js and Express. I learned how to create a server using Express, serve different files, and handle different requests from the browser.

This involved setting up routes to handle different endpoints and sending appropriate responses based on the requests.

I also implemented middleware to manage and preprocess incoming requests.

Understanding these concepts helped me in my journey to becoming a full-stack web developer. It gave me a deeper insight into backend development and how servers interact with clients, laying the foundation for more complex applications in the future.

Anyways, that’s all for now, more updates in my next blog! See you there!

[DAY 99-101] I acquired a database certificate from freecodecamp

Thomas Cansino — Mon, 12 Aug 2024 09:41:30 +0000

On days 99-101, I built a number guessing game where I built a bash script that asks you to guess the random number and a database that stores all games’ history and user information. This is also part 5 which is the last project needed to complete to get the database certificate from freecodecamp.

What I did first is to make a database with 2 tables: game_history and usernames

After that, I assigned primary keys for each table:

game_id for game_history table
username_id for usernames table

I also linked the tables with foreign keys:

username_id to link usernames and game_history table

Lastly, this is the script that I created:

Finally, I acquired the relational database certificate from freecodecamp!

I learned alot from this course and I recommend it if you want to learn about databases in your full-stack journey. It’s project-based so there's a few readings and mostly writing code (which I like). It mainly teaches about PostgreSQL, Bash, and Git.

Anyways, that’s all for now. More updates in my next blog! See you there!

[DAY 96-98] I built a script that gets info from a periodic table database

Thomas Cansino — Sun, 11 Aug 2024 13:58:56 +0000

Hi everyone! Welcome back to another blog where I document the things I learn in web development. I do this because it helps retain the information and concepts through active recall.

On days 96-98, I learned Git and built a periodic table database.

I followed through the freecodecamp database course to learn Git. It taught me about making branches to add a feature or fix a bug and merging those branches to the main one to have a good system for version control. This was a good course because Git is used when building projects with a team.

The next thing I did was a project where I built a periodic table database. This is part 4 out of 5 projects needed to complete to get the database certificate from freecodecamp.

What I did first is to make a database with 3 tables: elements, properties, and types.

After that, I assigned primary keys for each table:

atomic_number for elements and properties table
type_id for types table

I also linked the tables with foreign keys:

atomic_number to link elements and properties table
type_id to link properties and types table

Lastly, I created a bash script that gets information about the chemical elements from the periodic table database.

Example:

Type in ./element.sh on the terminal.

Next, let’s say I wanna get information about Fluorine. So type in ./element.sh fluorine.

Finally, the terminal will output:

The element with atomic number 9 is Fluorine (F). It's a nonmetal, with a mass of 18.998 amu. Fluorine has a melting point of -220 celsius and a boiling point of -188.1 celsius.

Anyways, that’s all for now. More updates in my next blog! See you there!

[DAY 93-95] I built an interactive database in PostgreSQL using a shell script

Thomas Cansino — Wed, 31 Jul 2024 16:00:00 +0000

On days 93-95, I picked up where I left off last blog, which is building an interactive database to rent and return bikes. I also built an interactive database to make appointments with a hair salon.

The first project is where I built an interactive database to rent and return bikes.

What I did first is to create a database with 3 tables: bikes, customers, and rentals.

After that, I assigned primary keys for each table:

bike_id for bikes table
customer_id for customers table
rentals_id for rentals table

I also linked the tables with foreign keys:

bike_id for rentals table to link with bikes table
customer_id for rentals table to link with customers table

Finally, I wrote a shell script that checks the available bikes, puts them up for rent, and returns the bikes that were rented.

The next project is another interactive database to make appointments with a hair salon. This is also part 3 out of 5 certification projects in the relational databases course in freecodecamp.

The first thing I did is to create a database with 3 tables: appointments, customers, and services.

After that, I assigned primary keys for each table:

appointment_id for appointments table
customer_id for customers table
service_id for services table

I also linked the tables with foreign keys:

customer_id for appointments table to link with customers table
service_id for appointments table to link with services table

Finally, I wrote a script that gives you a list of salon services, gets your name and your phone number, and schedules you for an appointment of your chosen service.

Anyways, that’s all for now, more updates in my next blog! See you there!

[DAY 90-92] I made a shell script to build me a world cup database

Thomas Cansino — Sun, 28 Jul 2024 15:11:33 +0000

Hi everyone! Welcome back to another blog where I document the things I learn in web development. I do this because it helps retain the information and concepts through active recall.

On days 90-92, I finished building a script to automate creating a database, a translator using a shell script, and started building an interactive bash program.

The first project is where I created a bash script to make a database about world cup matches in PostgreSQL. This is part 2 out of 5 certification projects in the relational databases course in freecodecamp. I also made a script on the side to query useful statistics from the database.

In this course, I was given a spreadsheet of a list of world cup games in 2014 and 2018.

What I did first is to make a database with 2 tables: games and teams.

After that, I assigned primary keys for each table:

game_id for games table
team_id for teams table

I also linked the tables with foreign keys:

opponent_id & winner_id for games table to link with teams table
team_id for teams table to link with games table

Next, I created a shell script to insert all the data from the spreadsheet to the database.

Finally, I made a script to query all the useful statistics from the database like who won the 2018 finals, list of teams that won in 2014, etc.

The next project is a translator using a shell script that translates cat texts to dog texts to learn advanced bash commands like sed, grep, redirection, and piping operators.

In this course, I was given a lorem ipsum about cats.

What I did first is to make a one-liner script using the sed command (stream editor).

When the script is initialized, the texts will be translated to lorem ipsum about dogs.

The next project is an interactive bash program where I must build a database about renting and returning bikes to learn more Bash and PSQL.

The first thing I did is to create the tables with columns, primary keys, and foreign keys to link all of them.

The next part is to write a shell script that makes the database interactive which I’ll be continuing on the next blog.

Anyways, that’s all for now. More updates in my next blog! See you there!

[DAY 87-89] I created a bash script to build a student database

Thomas Cansino — Wed, 24 Jul 2024 16:00:00 +0000

On days 87-89, I continued where I left off last blog, which is building a student database to learn SQL by creating a bash script that uses SQL to enter information about CS students into Postgres.

I created 4 tables in the database which are: students, majors, courses, and majors_courses.

After that, I assigned primary keys for each table:

student_id for students table
major_id for majors table
course_id for courses table
major_id and course_id (composite primary keys) for majors_courses table

I also linked each table with foreign keys:

major_id for students table to link with majors table
major_id for majors_courses table to link with majors table
course_id for majors_courses table to link with courses table

Then, I proceeded to create a script in bash to automate the process of inserting values in every table.

With that, I finished building the student database where I learned much about postgres queries on joining, filtering, and sorting tables. As well as making a bash script to automate the process of creating a database.

Moving forward, I started the next solo project in the course which is a database consisting of world cup games with postgres.

The requirement is that I must create a bash script that enters values into the database consisting of world cup games into PSQL.

However, this part is not done yet and I’ll be continuing this build next week.

Overall, I thought I wasn’t going to grasp the concepts I just learned and just rely on the good ol’ “build side projects to fill in the knowledge gaps”.

Fortunately, because of the repetitions throughout the whole course, I was able to quickly pick up the principles behind it. Due to this, I haven’t been having much trouble with the solo projects so far.

I give props to freecodecamp for providing a comprehensive course about databases and scripts.

Anyways, that’s all for now, more updates in my next blog! See you there!

[DAY 84-86] I Learned PostgreSQL & Bash Scripting

Thomas Cansino — Mon, 22 Jul 2024 12:22:39 +0000

Hi everyone! Welcome back to another blog where I document the things I learn in web development. I do this because it helps retain the information and concepts through active recall.

On days 84-86, I finished building the database consisting of celestial bodies with PostgreSQL.

Last blog, I talked about how I started building the database and how it was not done yet, part of it is because I was still having trouble referencing foreign keys to other tables due to lack of understanding.

In this blog, I was able to understand the concept of primary and foreign keys in databases and how tables link to each other using it.

What I did was to make 4 tables: galaxy, stars, planets, and moon.

After that, I added the necessary columns to satisfy the user stories in order to complete the project.

I also set the primary keys for each table:

galaxy_id for galaxies table
star_id for stars table
planet_id for planets table
moon_id for moon table

As well as linking all of the tables with their foreign keys:

galaxy_id for stars table
star_id for planets table
planet_id for moon table

The way foreign key works is that it links tables and groups each row. For example, we look at the stars table, every row consists of every star. For every star, it has a corresponding galaxy_id, the value of it is the ID of the galaxy where that star belongs.

The same goes for the planets where each planet belongs to a certain star and for the moons where each moon belongs to a certain planet.

With that, I have completed 1 out of 5 projects in the relational database course in freecodecamp.

Afterwards, I continued on with the course and finished building 5 programs to learn bash scripting.

I made a registration form to log your name, location, and your favorite coding website.

Then, a countdown to direct you to a bingo game where it generates random numbers from 0 to 75 and functions like a bingo.

Next is a magic 8-ball where you ask questions and it will randomly get an answer from an array.

The last program is used to run the other 4 programs I mentioned above so that it will start from the registration form and end on the magic 8-ball.

With that, I completed one of the topics in the course and moved on to the next one where I build a student database to learn SQL by creating a bash script that uses SQL to enter information about CS students into Postgres.

This part is not done yet and I aim to finish it by the next blog…

Anyways, that’s all for now. More updates in my next blog! See you there!

[DAY 81-83] I skipped a course and went straight into learning databases

Thomas Cansino — Sun, 21 Jul 2024 08:37:34 +0000

On days 81-83, after briefly learning about making charts and graphs using the D3 library and learning about GET and POST data using APIs, I started to build the 1st project in data visualization course which is making a bar chart with the given data.

Now, by this time, I've been reading reviews on the internet about this course and see if it's worth the time learning. Most of the answers were that it's okay to skip it and learn it some other time because it's not often used in web development.

So, I decided to skip it since I'm currently lacking any motivation to do them for the time being. Maybe next time…😉

Anyways, I've gone straight into doing the next course which is the relational database. It teaches about bash commands, creating and using databases with PostgreSQL, and a version control system, Git.

I started the course by building a website boilerplate using the VSCode terminal. This is the course I had been looking for when I was learning about React. I remember when I was making my first app in React, it required me to go straight into doing terminal commands to create a website boilerplate in Vite without me having the slightest idea. Good thing there are YouTube tutorials for those.

Next, I've also built a mario database to learn PostgreSQL. This topic helps you build a database containing video game characters. There's a lot of repetition and I took the opportunity to take notes of the syntax so that I can refer to them in future projects.

After that, I started to build a database consisting of celestial bodies in the universe. It’s not done yet and I’m currently having trouble in referencing foreign keys for every table in the database. But hopefully, I look forward to finishing it by next blog.

Anyways, that's all for now, more updates in my next blog! See you there!