Let's take a break from the terminal. In any project, before starting coding, we need to spend some time planning and visualizing what we are aiming for. That's exactly what we are going to do: draw some wireframes that walk us through the app. Our e-commerce app–MEANshop–will have three main sections:
- Homepage
- Marketplace
- Backoffice
The homepage will contain the featured products, navigation, menus, and some basic information, as you can see in the following image:
Figure 2: Wireframe of the homepage
This section will show all the products, categories, and search results:
Figure 3: Wireframe of the products page
You need to be a registered user for accessing the back office section.
Figure 4: Wireframe of the login page
After you log in, the app will present you with different options depending on your role. If you are the seller, you can create new products, as shown in the following image:
Figure 5: Wireframe of the Product creation page
If you are an admin, you can do everything that a seller does (create products), and you can manage all the users and delete/edit products.