Portfolio

My first project is a dynamic and responsive webpage that showcases my proficiency in web development skills. I used Bootstrap to layout the web pages, HTML to create web elements, CSS to implement color schemes and different design styles, and JavaScript to create smooth animations, transitions, and effects. All of the styling and animations in my portfolio are proudly done using pure CSS and JavaScript, without relying on any existing frameworks or libraries. This project demonstrates my extensive knowledge on the fundamentals of both CSS and JavaScript, and my ability to extend their possibilities.

The portfolio is divided into five sections:

• Landing: This section presents a subtle and pleasing animation of my name, title and main skills as a web developer.
• About Me: This section provides a short description of my personality as a professional, my picture, and my contact information
• Projects: This section proudly showcases all my finished projects, including my web developer portfolio.
• Tools: This section features all the tools that I can use proficiently hence all the skills that comes with utilizing all those tools
• Contact: This section provides a contact form and a showcase of all my achievements, certifications and awards

I am proud of this project and I believe it is a strong representation of my skills and abilities as a web developer.

Minimalistic Shop API

In building this API, I explored the power of databases with the use of MongoDB and Postman. This API will enable users to shop, order, and add to cart. It also lets sellers/admins to monitor and control the stocks and sales of their products; it also prioritizes the security and privacy of all its users. I have tested all these routes through Postman, and have stored the gathered data in a MongoDB database, creating a seamlessly working and efficient backend server application.

This e-commerce API is mainly composed of three elements:

• Schemas: In this API I have created five schemas: cart, checkout, order, product and user. These schemas will act as the blueprint in saving the data in the database. It enables the different features and functionalities that will be applied in the frontend application.
• Controllers: The controllers are the ones that contains the necessary logic required to execute the different features and functionalities both for the backend and frontend server applications.
• Routes: The routes are where the controllers gets its command/request from. It is where the create, read, update, and delete operations are initialized, and is then passed to defined controller to execute exact logic that is requrired for the specific operation.

This API showcases my proficiency in working with databases, and my ability to use MongoDB as a database management system, Postman as a testing and debugging tool, and Node.js with Express.js as frameworks for creating a fully functional E-commerce API.

Minimalistic Shop

I built a dynamic web application using React.js and the MERN stack, hosted/deployed in Vercel. It's a fully functional e-commerce shop where shoppers can browse and add products to their cart, while sellers and admins can showcase their products with images and descriptions. The application boasts a user-friendly and attractive interface, making the shopping experience smooth and enjoyable.

Here are some of the features and functionalities of the application:

• User Sign up and Log in: This feature executes user creation and authentication. With the use of props, event listeners, and the local storage. The front end seamlessly communicates with the backend by tracing the correct controller and logic from fetching the correct routes. After a user has been created, his/her credentials will then be saved in the database, and will have a new token generated used for authentication, everytime he/she logs in.
• Add to cart: The add to cart feature utilizes the cart schema from the backend. It detects the product that the user wants to add to cart, and creates a new instance of the cart schema. This will then be recorded into the database as a new cart and is also presented to the user in the front-end via retrieving the cart details
• Admin Dashboard: The admin dashboard is where admins can monitor, edit, delete and update all the products in the e-commerce application. Specifically, they can edit the name, description, price and image of the products, they could also archive and activate all of the products.
• Add Products: This feature lets the admins add products, with its own unique name, description, price and image. For their convenience I have also placed beside it an overview of all the products where they can see the name, description, price and image of all the products that is already added.
• Browse all products: This feature/page allows the admin to beautifully showcase all of his/her products. It also allows the user to efficiently browse and select the potiential products/items that they will add to cart and eventually checkout.
• See product details: The see product details feature is added to help the users decide if they really want to add the product to cart. The user will be able to see the name, description, price, image of the product and other additional information in a bigger format. This help the user to know more about the product, and also the admin to present all the information and go all out in enticing a user/shopper to buy his/her product.

This full-stack react application showcases my knowledge and proficiency in creating a user-friendly, and dynamic web application, that effciently utilizes and integrates the back-end and front-end applications.

Minimalistic Calculator

In this project I showcased my unending passion for knowledge and learning new things. Using a newer tool in Sveltekit and Typescript, I created a fully-functional and precise calculator that maximizes the server-side rendering enabled by Sveltekit.

This online calculator is mainly composed of three objectives:

• Main Objective: Create a calculator app which accepts and computes for equations with multiple operators and numbers; and without using eval(), Function(), mathjs or any computation library.
• Front-end Code Objectives: Provide buttons for entering operators and numbers. Send a POST request to the backend server containing the created equation. Present the received answer from the backend API
• Back-end Code Objective: Calculate the received equation from the front end and send it back as a response.

With this objectives I have created a calculator app that will fully utilize the functions of the Sveltekit framework and Typescript particularly with the its server-side rendering feature used in calculating the equation provided by the user from the front end.