
## Problem:
In this article we will start building our Next.js project move2room. So first lets install Next.js and I'll show you the folder structure of Next.js
## Installing Next.js:
We can install next very easy by pulling a pre created template from git, I'll show you how to do this in the following step, however now I'd prefer to start with the basic method where we will install a react app, then add libraries step by step, so we can understand the full folder structure and the ins and outs of Next.js setup. I can write any thing now right.

### Installing node.js
1. go to https://nodejs.org/en/ and download the latest version of Node.js, npm and npx will be installed as well.
1. Open an empty folder to store the project directory
   in mac use `terminal`
### Installing Next.js
### Basic installation :
2. Use use `npx` to create react app
  
   
   ```bash
    npx create-next-app . ⏎
    # or
    yarn create next-app . ⏎  
    ```
  if you noticed we used a dot after the command to tell npx to install Next.js in the same folder.

  After the app has been installed successfully, you can see all the files structure has been created.
  
  If we go to the `package.json` file

  ```json
  {
  "name": "move2room",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}
  ```
  
  We can see `"next" , "react" ,"react-dom"` 

  On the other hand you can see scripts `"dev","build","start"` so if we want to run a development mode we should type:
  ```bash
  npm run dev ⏎
  ```
 - to start the development server on http://localhost:3000
 - Visit http://localhost:3000 to view your application
- Edit pages/index.js and see the updated result in your browser
  
To run a build mode (where we will have a build ready for deployment) we need to type:
  ```bash
  npm run build ⏎
  ```
  To run production mode type:
  ```bash
  npm run start ⏎
  ```
For manual set please refare to: https://nextjs.org/docs/getting-started

### Folder structure:
```
/root
  \_ /.next/
  \_ /components/
      \_ Button/
          \_ button.spec.jsx
          \_ button.styles.jsx
          \_ index.jsx
  \_ /constants/
      \_ theme.js
      \_ page.js
  \_ /contexts/
      \_ Locale/
         \_ index.js
      \_ Page/
         \_ index.js
  \_ /pages/
      \_ _app.jsx
      \_ _document.jsx
      \_ about.jsx
      \_ index.jsx
  \_ /providers/
      \_ Locale/
         \_ index.js
      \_ Page/
         \_ index.js
  \_ /public/
      \_ favicon.ico
      \_ header.png
  \_ /redux/
      \_ actions/
         \_ users/
            \_ index.js
         \_ products/
            \_ index.js
      \_ reducers/
         \_ users/
            \_ index.js
         \_ products/
            \_ index.js
      \_ store/
         \_ index.js
      \_ types/
         \_ index.js
  \_ /shared/
      \_ jsons/
          \_ users.json
      \_ libs/
          \_ locale.js
      \_ styles/
          \_ global.css
  \_ /widgets/
      \_ PageHeader/
          \_ index.jsx
  \
  \_ .eslintignore
  \_ .eslintrc
  \_ .env
  \_ babel.config.js
  \_ Dockerfile
  \_ jest.config.js
  \_ next.config.js
  \_ package.json
  \_ README.md
```

Installing Next.js & Understanding Folder Structure

Using custom Font Family in a Next JS application involves 3 easy steps! setting up` _document.js` , declaring the custom font family in tailwind.`config.js` and using it in our `Components/Pages`.
For this example, we will be using “Google Fonts” as the font provider!
Let's pick `Inter` Sans font from fonts.google.com and copy the href URL.
In this case, it’ll be:

```html
  href="https://fonts.googleapis.com/
  css2?family=Poppins:wght@100;200;300;
  400;500;600;700;800;900display=swap"
  rel="stylesheet"
```

Go to pages folder  `next-project/pages/` , and create a new custom document `file _document.js` and set it up with the following code

          import Document, {
              Html,
              Head,
              Main,
              NextScript,
            } from 'next/document'
            class MyDocument extends Document {
              static async getInitialProps(ctx)
              {
                const initialProps = await 
                Document.getInitialProps(ctx)
                return initialProps
              }
              render() {
                return (
                      <Html>
                        <Head>
                        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;700&display=swap" rel="stylesheet" />
                        </Head>
                        <body>
                          <Main />
                          <NextScript />
                        </body>
                      </Html>
                )
              }
            }

            export default MyDocument


Google Fonts to NextJS app with Tailwind CSS

To go through CSS animation lets start with this example:

___./style.css___

     .parent{
        background-color:hsla(200,100%,20%);
        height: 400px;
        width: 400px;
      }
      .child{
        background-color:red;
        height:50%;
        width: 50%;
      }
      .parent:hover .child{
        transform:translateX(100%)
      }

___./index.html___

      <div class="parent">
        <div class="child"></div>
      </div>

This CSS will result in two rectangles, when hovering on the red small one it changes its state to appear on the right side.

However it just jumps no smooth transition what so ever. To solve this we will use animation.
We have to approaches for animation in CSS. simple animation using `transition` property, and full on animation using `animation` property.

## 1.0 Transition:
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
![](/assets/imgs/posts/transitionsprinciple.png)

### 1.1 Defining Transition
You can control the individual components of the transition with the following sub-properties:

1.1.1 `transition-property`

1.1.2 `transition-duration`

1.1.3 `transition-timing`

1.1.4 `transition-delay`

The shorthand CSS syntax is written as follows:

    div {
    transition: <property> <duration> <timing-function> <delay>;
    }

__Example:__
All what we need is the `transition` property in CSS as followint:
___./styles.css___

      .parent{
        background-color:hsla(200,100%,20%);
        height: 400px;
        width: 400px;
      }
      .child{
        background-color:red;
        height:50%;
        width: 50%;
        transition: transform 1s 1s;
        or
          transition-property: transform;
          transition-duration: 1s;
          transition-delay: 1s;
      }
      .parent:hover .child{
        transform:translateX(100%)
      }
![](/assets/imgs/posts/ezgif.com-gif-maker.gif)

Lets apply transition to the same hover:

___./styles.css___

      .parent{
        background-color:hsla(200,100%,20%);
        height: 400px;
        width: 400px;
      }
      .child{
        background-color:red;
        height:50%;
        width: 50%;
        transition: transform 1s easy-in-out;
        or
          transition-property: transform;
          transition-duration: 1s;
          transition-timing: easy-in-out;
          transition-delay: 1s;
      }
      .parent:hover .child{
        transform:translateX(100%)
      }

![](/assets/imgs/posts/ezgif.com-gif-maker-1.gif)

## 2.0 animation


CSS Animation

## Why should I care about CSS Selectors?
Selectors will help you to precisely select the exact element/s which should receive your desired styles (colors, size, animation.... etc). You will need them as well in ___javascript___ to select element/s to manipulate... 

Learn about CSS Selectors correctly and structurally and you will thank me later.

There is a ton of them in this article I'll teach you how to get started with them.
## 1.0 Basic CSS selectors

### 1.1 Universal CSS Selector
__syntax__: `*` 

_Universal selector_ will select latterly every element in the body.

    * {
     color:red;
    }

Result selecting all body elements:

    <div class="red"> Love Cats </div> ←
    <span id="blue"> Love Dogs </span> ←
    <div>
      <span>
        <b> nested text </b>           ←
      </span>
    </div> 
    <input type="text">                ←
    <div>
      <ul>
        <li class="">Dog</li>          ←
        <li class="red">Cat</li>       ←
        <li class="">Frog</li>         ←
        <li class="">Mouse</li>        ←
      </ul>
    </div>

### 1.2 Type Selector
`div` , `span` , `li` , `input` , `ul` , `table`... etc
This will select every element in the page that have the same specific type that mentioned..

    div {
    color:red;
    }

    <div class="red"> Love Cats </div> ←
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           ←
      </span>
    </div> 
    <input type="text">        
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       
        <li class="">Frog</li>         
        <li class="">Mouse</li>        
      </ul>
    </div>


### 1.3 Class selector
`.name`

A class is an attribute for type selector  you ad to your tags can be a descriptive name such as `first` `reds` what ever discribs your need. A class has to start with a dot in the CSS file:

    .red {
     color: red;
    }

    <div class="red"> Love Cats </div> ←
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>   
      </span>
    </div> 
    <input type="text">        
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       ←
        <li class="">Frog</li>         
        <li class="">Mouse</li>        
      </ul>
    </div>

### 1.4 ID selectors
`#section` , `#name`

Similar to class selector however starts with `#` sign, and it is stronger than classes in specificity - more on specificity late.

__Note__: _You can have only one ID on a page_, so you don't want to use as it is very specific. Class is way better as you can share it between elements.

    #dog {
     color: green;
    }

    <div class="red"> Love Cats </div> 
    <span id="dog"> Love Dogs </span>  ←
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       
        <li class="">Frog</li>         
        <li class="">Mouse</li>        
      </ul>
    </div>

### 1.5 Attribute selector
It selects all elements that have the given attribute.

__Syntax:__ [attr] [attr=value] [attr~=value] [attr^=value] [attr$=value] [attr*=value]

|Selector|Example|Description|
| ------- | ---- | -- |
|__[attr]__|[autoplay]|will match all elements that have the `autoplay` attribute set (to any value).|

    [autoplay], [type=text] {
      color:red;
    }

    <div class="red"> Love Cats </div> 
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text" autoplay="true">  ←
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       
        <li class="">Frog</li>         
        <li class="">Mouse</li>        
      </ul>
    </div>

## 2.0 Grouping selectors 
### `and`
This is to be very specific about selecting a certain element, for example if you want to select a class `.red` which is only a `div`.
You will need to combine different selectors, by adding them together with no space between:

    div.red{
     color:green
    }

    <div class="red"> Love Cats </div> ←
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       ←
        <li class="">Frog</li>         
        <li class="">Mouse</li>        
      </ul>
    </div>

### `or`
To apply `,` selector you need to type the first selector followed by coma `,` this will mean if we have the first selector or the second selector apply this style:

    div, red {
     color:red
    }

    <div class="red"> Love Cats </div> ←
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           ←
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          ←
        <li class="red">Cat</li>       ←
        <li class="">Frog</li>         ←
        <li class="">Mouse</li>        ←
      </ul>
    </div>

## 3.0 Combinators
### 3.1 Descendant selectors
Selecting an element inside another element, by adding `(Space)`
 
    div li {
     color:red;
    }

    <div class="red"> Love Cats </div> 
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          ←
        <li class="red">Cat</li>       ←
        <li class="">Frog</li>         ←
        <li class="">Mouse</li>        ←
      </ul>
    </div>

![descendant selectors,test](https://cdn.kastatic.org/ka-cs-challenge-images/htmldomtree.jpg)

#### 3.2 Child Combiner
Selecting an element inside another element, by adding '>'
 
    div > li  {
     color:red;
    }
 
 
    <div class="red"> Love Cats </div> 
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       
        <li class="">Frog</li>         
        <li class="">Mouse</li>        
      </ul>
    </div>
 
### 3.2 Sibling Combinators
#### 3.2.1 General sibling Combinator
use the `~` operator
Any same level element `sibling` comes after the selected selector

    li.red ~ li {
     color:blue;
    }

    <div class="red"> Love Cats </div> 
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       
        <li class="">Frog</li>         ←
        <li class="">Mouse</li>        ←
      </ul>
    </div>

#### 3.2.2 Adjacent sibling combinator 
use the `+` operator

    li.red + li {
     color:blue;
    }

    <div class="red"> Love Cats </div> 
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       
        <li class="">Frog</li>         ←
        <li class="">Mouse</li>        
      </ul>
    </div>
.

## 4.0 Pseudo
### 4.1 Pseudo Classes
it is a keyword added to a selector that specifies a special state. such as `:hover` that can change button color or a div.

    li:hover{
     color:red;
     background:green;
    }

|Selector|Example|Description|
| ------- | ---- | -- |
|__:hover__|__p__:hover |when hove|ring over an element|
|__:focus__|__p__:focus |to focus on an element example form __input__ & __button__|
|__:required__|__input__:required |when the __input__ element is required|
|__:checked__|__input__:checked |connected to checkboxes|

### 4.2 Pseudo elements
__(based on child location)__

|Selector|Example|Description|
| ------- | ---- | -- |
|__:first-child__|__p__:first-child |first child in elements node

    li:first-child {
     color:blue;
    }

    <div class="red"> Love Cats </div> 
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          ←
        <li class="red">Cat</li>       
        <li class="">Frog</li>         
        <li class="">Mouse</li>        
      </ul>
    </div>

|Selector|Example|Description|
| ------- | ---- | -- |
|__:last-child__|__p__:last-child |last child in elements node
 
    li:last-child {
     color:red;
    }

    <div class="red"> Love Cats </div> 
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       
        <li class="">Frog</li>         
        <li class="">Mouse</li>        ←
      </ul>
    </div>
 
___n___ in the following examples is the child number
|Selector|Example|Description|
| ------- | ---- | -- |
|__:nth-child(n)__ |p:nth-child(2)|the second number|
|__:nth-child(nn)__ |p:nth-child(3n)|every second number|
|__:nth-child(nn -1)__| | every second element and offset -1 means start of first element.|
|__:nth-last-child(nn)__| | every second element element starts form the bottom|
|__:nth-last-child(2n -1)__| | every second element starts from the bottom offset by tow.|


    li:nth-child(3){
      background:red;
    }

    <div class="red"> Love Cats </div> 
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       
        <li class="">Frog</li>         ←
        <li class="">Mouse</li>        
      </ul>
    </div>

    li:nth-child(2n) {...}

    <div class="red"> Love Cats </div> 
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red">Cat</li>       ←
        <li class="">Frog</li>         
        <li class="">Mouse</li>        ←
      </ul>
    </div>


`:only-child` apply this only if it is the only child

`:not()` not a

### Psudo elements
This will help you to install content just before the element or after.

|Selector|Example|Description|
| - | - | - |
|__::before__|__p__::before|Insert _something_ before the content of each element __'\<p>'__|
|__:after__|__p__::after|Insert _something_ after the content of each element __'\<p>'__|

     div.red::before{
       content:'I '
     }

     <div class="red"> I Love Cats </div> ←
    <span id="blue"> Love Dogs </span> 
    <div>
      <span>
        <b> nested text </b>           
      </span>
    </div> 
    <input type="text">                
    <div>
      <ul>
        <li class="">Dog</li>          
        <li class="red"> I Cat</li>       
        <li class="">Frog</li>         
        <li class="">Mouse</li>        
      </ul>
    </div>


CSS Selectors

## Why should I care about CSS specificity
Well, first you need this to pass your £35,000 Webdev Interview.. if you care about getting a job in the first place...

Second, This is the way how browsers prioritize which styles should be  applied to any of the DOM HTML element specifically.

In other word, if you have this code:

      <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Document</title>
              <style>
              h1{
                color:red;
              }
              </style>
          </head>
          <body>
              <h1>Hello World</h1>
          </body>
      </html>

The result will print 
```
 Hello World
 ``` 
 in red.

So, we can to simplify how the browser decides  which selector to apply, lets imagine that there is four figure number.
0,0,0,0

CSS specificity

HTML DOM Events


If you are already experienced with React and JavaScript tooling and want to dive right in and figure things out as you go, this is the quickest way to get started:

```bash
# Install the command line tool
$ npm install --global expo-cli

# Create a new project
$ expo init my-project
```

Installing React Native using Expo


Testing is one of those things that people either love or hate. Usually testing is something that is hated, until you work on a project with good tests and you realize how amazing they are.

In this article I am going to show you how to get started with testing in JavaScript using Jest. I will talk about the code you need in order to write tests, as well as show you some pitfalls of testing.

I'll follow this article with more advanced one showing how to do React.js based testing.


Javascript testing using Jest

Next.js fetching new Data

### Option 3: Update Node.js with Binary Packages
go to https://nodejs.org/en/ and download the most updated version

follow instructions agree on terms and conditions, ... few second you are sorted.

### Option 2: Update Node.js with NPM (Node Package Manager)
As an alternative, you can use Node’s official package manager to update Node.js. NPM is a tool for installing and managing package dependencies.

If you have Node on your system, you have NPM, as well. With the npm command, you can check running Node.js versions and install the latest release.

By adding the n module, you can interactively manage Node.js versions.

1. First, clear the npm cache:
```bash
$ npm cache clean -f
```
2. Install n, Node’s version manager:

```bash
$ npm install -g n
```
3. With the n module installed, you can use it to:

  Install the latest stable version:

  ```bash
  $ sudo n stable
  ```

Install the latest release:

```
$ sudo n latest
```

Install a specific version:

```
$ sudo n [version.number]
```

Updating Node.js version

What do we say often?

From the Blog

Contact Me

Nextjs

Thanks to my React skills your website/app will be dynamic instrument, no need for refreshing the page.

React

How do we do it?

What do we do?

🇬🇧 Hi, I’m Sherif: passionate, Full-Stack web developer with experience in structuring, developing and implementing interactive websites and webapps - hence, I designed and coded this portfolio-site... 😎

Iron Forex

Octotmmerce

EverFx

UmrahExpress

What they say about us

Trusted by <span>brands</span> all over

ReactJs

View Live

---
title: Deriving the OLS Estimator
date: '2020-12-21'
tags: ['next js', 'math', 'ols']
draft: false
summary: 'How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.'
---

## Summary 

 Experimental project - Clean, minimalistic React music player web application.

React Music Player

---
title: Deriving the OLS Estimator
date: '2020-12-21'
tags: ['next js', 'math', 'ols']
draft: false
summary: 'How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.'
---

## Summary

Shopping list project used as a proof of concept for dynamic rearrange divs in mongo db.

MERN shopping list

Thanks to my HTML5 skills your website can be scaled to any device and will perform brilliantly on mobile phones.

Semantic HTML

---
title: My protafolio 
date: '2020-12-21'
tags: ['next js', 'CSS', 'styled-components ']
draft: false
summary: 'How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.'
---

### Summary

 An interactive Nextjs portfolio that uses hosted Local JSON to data Object to demonstrate my work and development skills. I decided to use Nextjs as it provides very good support for SEO. and provides server side rendering out of the box.
### My Role
I took this project from idea, to conceptual design, mockup creation, Next.s programming up to deployment.

My Portfolio

---
title: Deriving the OLS Estimator
date: '2020-12-21'
tags: ['next js', 'math', 'ols']
draft: false
summary: 'How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.'
---

## Summary

GiveStar is helping charities step confidently into a new world of digital, cashless fundraising. How? We’re empowering fundraisers by giving them the simple tools they need to unlock more donations than ever.

### My role: 

 build customer-facing Web-UI and back-end services for payment processing administration and management, using React.js, Next.js, Redux, node.js and mongodb.

GS Fund Rasing and donation payment

---
title: Deriving the OLS Estimator
date: '2020-12-21'
tags: ['next js', 'math', 'ols']
draft: false
summary: 'How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.'
---

## Summary

 Elegant and vibrant e-commerce shop providing delicious ranges of jelly sweets. ,
### My Role  
Implementing web design and development principles to build stable web applications. Bringing mock-ups to life using HTML, CSS, Wordpress. Assessing UX and UI designs for technical feasibility. Testing to identify bugs and technical issues before and after deploying. I have developed this shop from scratch and have:
 - Designed the logo 
 - Developed e-shop (Wordpress) 
 - Shot products photos

Halal Sweet Treats

---
title: Deriving the OLS Estimator
date: '2020-12-21'
tags: ['next js', 'math', 'ols']
draft: false
summary: 'How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.'
---

## Summary

Original fashion e-commerce website targeting ethnic minority shoppers. 
### My role: 
From brand creation to designing and launching the full e-commerce site. Versatile full-stack web development experience in a commercial setting. This website can be scaled to any device and perform brilliantly on mobile phones. Works consistently across different browsers and platforms. 

Octommerce Modest Clothing

---
title: Deriving the OLS Estimator
date: '2020-12-21'
tags: ['next js', 'math', 'ols']
draft: false
summary: 'How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.'
---

## Summary

Modern Artist website for famous Egyptian Contemporary Painter.

### My role: 

From creating the branding to designing and launching the full e-commerce site. Standardized all output with a new, responsive, mobile-first approach and strategy.

Artist Mostafa Butt

Websites don't have to be static, I love making pages come to life.

Javascript

CSS is what gives your entire website a style. By using CSS language for interesting fonts, colours, and background images, I will make your webpage look slick and smart.

Using NextJs, I'll infuse your web app with SEO capabilities, and basing fast speed and server side rendering

NextJs

Reach who your competition neglects. I will make your digital content usable by as many people as possible. Accessibility solutions are not only for people with severe disabilities for life, they are  also for any person who has broken an arm or just can’t find their glasses.

I translate IDEAS into code using React

My Work

My Portfolio →

GS Fund Rasing and donation payment →

React Music Player →

MERN shopping list →

Halal Sweet Treats →

Octommerce Modest Clothing →

Trusted by brands all over