How To Build An Online Shop Platform With ReactJs, ReactNative, NodeJs And MySql - Intro

Author - Online Shop Platform: The structure of the project
Cristian
October 2nd, 2020
Online Shop Platform: The structure of the project

Online Shop Platform: The structure of the project

Building an entire online shop platform from scratch is not simple, and needs knowledge, a lot of time and patience.

There are lots of products ready to use these days that you might ask yourself why should I reinvent the wheel?

Well, there are PROS and CONS to this question and I will leave you to decide what is better for your needs.

1. The structure of the project

As you can see in the diagram below, which represents the structure of the project, it integrates a Mobile/Tablet app (Android and iOS), which is coded with ReactNative and a desktop application, which uses ReactJs. Both are Client-Side Rendered (CSR) applications.

How to build an online shop platform - Project Structure Diagram

As any CSR application, it needs an API, and one based on NodeJS + Express is something that I will implement over the next episodes as a RESTFUL API.

As a database, I will use a MySql one. The connection between NodeJs and MySql will be sorted using Sequelize library, which is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more. More details about it here: https://sequelize.org/

I will also integrate over the next episodes, some payment systems based on Stripe and PayPal, Real-Time push notification, Email Notification and even a module for automated stock imports from different suppliers.

Over the entire project, I will write unit/visual/e2e and lint tests too.

2. Reused code

There will be some reused code extracted into a couple of dependencies as:

  • Components Library;
  • Constants Library;
  • Translations Library;
  • Fonts Library;
  • Static Assets

  • How to build an online shop platform - Project Libraries Diagram

    This is a very short summary of a project I hope triggered your curiosity.

    Let’s start our journey into the next article.