DEV Community: HakimRaissi

Do I overestimate my abilities?

HakimRaissi — Wed, 13 Apr 2022 09:47:46 +0000

Hello, everyone. Today I decided to challenge myself and build an entire e-commerce web app with the MERN stack (which is the one I'm the most comfortable with).The web app will be a full-fledged e-Commerce platform with features such as multiple user roles (client, store manager, and admin), each with their own dashboard interface, and a fully responsive front-end (I hope lol).

I will use as few libraries as possible and bare vanilla CSS (yes, you read it right). The reason? I'm attempting to overcome the impostor syndrome and improve my skills while building a project that might be relevant to put in a portfolio and maybe get a job as a university drop-out (cause yeah, I couldn't find a job with the projects I did until now).

Has anyone completed a similar project while working alone? Does it seem doable considering i will not be watching any tutorial ?

Please let me know what you think in the comments and maybe share your experience or a few tips with me.

What is your Headless CMS of choice ?

HakimRaissi — Sun, 10 Apr 2022 07:06:54 +0000

Hello everyone. So recently I discovered the world of CMS like Sanity or GraphCMS.

Well, I already knew WordPress before but never paid attention to it since I wanted to learn how to code before learning how to make websites, so yeah anyway.

Do you have a preference for CMS in particular?

If yes, then which one and why?

Is a CMS more suitable for a specific task than another one?

Please feel free to share your knowledge and opinions with me in the comments.

Pagination with express and mongoose

HakimRaissi — Mon, 28 Mar 2022 09:18:37 +0000

When I started making my own MERN e-Commerce App from scratch, I never took the time to think about the implementation of the back-end. For example, for searching products, I thought I could just request all products from the database and apply filters on the frontend with some JS. Well, if I had just a dozen products in my database, this would be an "okay" solution. But I quickly realized how stupid I was.

Imagine if I had hundreds of products in my database. How much time does it take to get all the data with a single request? How much bandwidth would you use? What if the user has a 4G connection? How much memory is the browser going to use to execute the front-end code for filters?

From here, I started to do some research (Googling) on how it is usually done and what the best practices are (I'm using MongoDB with Mongoose), and I found about the skip and limit methods we can combine and use when we request the data using Mongoose.

the `limit()` method

This method receives a number as a parameter and lets us set the maximum number of documents we can get on one request.

the `skip()` method

This method receives a number as a parameter and allows the user to specify the number of documents to skip. When we make a request, this method ignores the n documents we specified and returns the rest.

Show me the code


const getProducts= async (req, res, next) => {
    try {
        // We destructure the req.query object to get the page and limit variables from url 
        const { page = 1, limit = 10 } = req.query;

        const products = await Product.find({ ...req.query })
            // We multiply the "limit" variables by one just to make sure we pass a number and not a string
            .limit(limit * 1)
            // I don't think i need to explain the math here
            .skip((page - 1) * limit)
            // We sort the data by the date of their creation in descending order (user 1 instead of -1 to get ascending order)
            .sort({ createdAt: -1 })

        // Getting the numbers of products stored in database
        const count = await Product.countDocuments();

        return res.status(200).json({
            products,
            totalPages: Math.ceil(count / limit),
            currentPage: page,
        });
    } catch (err) {
        next(err);
    }
};

}

Conclusion

Actually, the MERN application I'm developing is the first project I'm building without following any tutorial or course, and I'm trying to use as little libraries and third-party code as possible, so I'm learning along the way, and the least I can say is that I've already encountered a lot of obstacles that made me grow as a developer. I'll be sharing the problems I encounter and the solutions I come up with to solve them on dev.to as much as I can.

I'm still new to blogging and web development, so please, if you have any feedback, I'd love to read it.

Simple and minimalistic product image slider

HakimRaissi — Thu, 24 Mar 2022 01:15:19 +0000

I am writing this post after I struggled today to find a way to implement a simple and responsive image slider for my product page (ecommerce mern app).

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="style.css" type="text/css" media="all" />
        <title>product page</title>
    </head>
    <body>
        <div class="product">
            <div class="product__images">
                <img
                    src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993803/ecommerce/smartphone/623a63c9251afc7d338faab5/vzjovup3izma7q2skzcf.jpg"
                    alt="google pixel 6"
                    class="product__main-image"
                    id="main-image"
                />

                <div class="product__slider-wrap">
                    <div class="product__slider">
                        <img
                            src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993803/ecommerce/smartphone/623a63c9251afc7d338faab5/vzjovup3izma7q2skzcf.jpg"
                            alt="google pixel 6"
                            class="product__image product__image--active"
                        />
                        <img
                            src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993806/ecommerce/smartphone/623a63c9251afc7d338faab5/xtfslzmfpwg3bwoyylve.jpg"
                            alt="google pixel 6"
                            class="product__image"
                        />
                        <img
                            src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993811/ecommerce/smartphone/623a63c9251afc7d338faab5/kqp1ffmcfs2q6ctck36i.jpg"
                            alt="google pixel 6"
                            class="product__image"
                        />
                        <img
                            src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993808/ecommerce/smartphone/623a63c9251afc7d338faab5/fkco14duxzv8rnkyctbr.jpg"
                            alt="google pixel 6"
                            class="product__image"
                        />
                    </div>
                </div>
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.product {
  width: 100%;
  height: 100vh;
}

.product__images {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.product__main-image {
  max-width: 500px;
  max-height: 600px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #070707;
}

.product__slider-wrap {
  max-width: 500px;
  min-height: 100px;
  display: flex;
  align-items: center;
}

.product__slider {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.product__image {
  max-width: 180px;
  max-height: 100px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  margin: 0.25rem;
  border: 1px solid #070707;
}

.product__image:first-child {
  margin-left: 0;
}

.product__image:last-child {
  margin-right: 0;
}

.product__image:hover {
  opacity: 1;
}

.product__image--active {
  opacity: 1;
}

.product__slider::-webkit-scrollbar {
  height: 10px;
}

.product__slider::-webkit-scrollbar-thumb {
  background-color: #f9564f;
  border-radius: 50px;
}

JavaScript

const mainImage = document.getElementById("main-image");
const images = document.querySelectorAll(".product__image");

images.forEach((image) => {
    image.addEventListener("click", (event) => {
        mainImage.src = event.target.src;

        document
            .querySelector(".product__image--active")
            .classList.remove("product__image--active");

        event.target.classList.add("product__image--active");
    });
});

Result

Conclusion

And there you have it. I hope this post was useful to at least one person who does not want to use third-party code or follow a lengthy tutorial to create a fancy slider.

This is my first post and I'm still new to web development, so any constructive criticism is welcome.

Have a good day (or night, if you are a night owl like me).

DEV Community: HakimRaissi

Do I overestimate my abilities?

What is your Headless CMS of choice ?

Pagination with express and mongoose

the limit() method

the skip() method

Show me the code

Conclusion

Simple and minimalistic product image slider

HTML

CSS

JavaScript

Result

Conclusion

the `limit()` method

the `skip()` method