This large app consists of two parts. Front-end and back-end respectively.
Let's start with the UI part. We have carefully designed and coded pages.
With help of NextJS, we are now able to send server-side rendered code to the end-user and thus have SEO-friendly website.
There is an SEO module in this project, SEO content can be added and edited by the content manager.
A lot of stuff going on in the admin panel:
1) Tables with real backend data, you can preview content without opening the view page. Also, you can filter by date.
2) View page where you can see all the fields with or without values for a certain entity e.g. product.
3) Edit page is mostly the same as View, but there you can save changes.
So let's go over the admin sideNice and clean Home page with charts, statistics, and tabs widget.
Orders tab is a list of orders that you can filter, view, and edit
Feedback is a great thing for online business and we added full-featured feedback to this project, you can view and moderate feedback, wow!
The blog is a small ready-made CMS, you can create blog posts with a bunch of dynamic data and multiple images just give it a try!
Products are heart of every e-commerce project you can set price, image, category for filtering, discount, and much more
Users is a place where all you customers are at a glance.
Categories are mostly used for filtering so-called helper for you business.
My profile serves admin and customer to view their data and change it if needed.
Change password speaks for itself.
Documentation is designed to help you learn all about this template.
Client-side is accessible for everyone and you can explore it just by clicking here and there, all the pages are mobile and SEO friendly
Check out the billing page, it has stripe integration so you can test it out and also easily change stripe credentials so payment setup is going to be effortless.
There is a wishlist where you can see desired products and purchase at some point in time. And much more, explore the template and make a purchase.
Let's talk about what's going on under the hood and I mean backend.
It's built with help of the express js framework. We use Postgres as a database and squelize serves as ORM. There were two reasons why we picked this stack. First of all, community, clear documentation, and a lot of open-source libraries. Second of all, we are experts with this technology.
So what is inside?
The first thing I want to mention is the passport.js library for authentication. Simple, unobtrusive authentication that became standard in the NodeJS world. For password encryption we used bcrypt. In db > api folder we have all the necessary files with CRUD methods to interact with DB.
Models are just data objects that clearly showcase what kind of data we can anticipate for each entity.
Seeders are a heap of sample data that is added to the web app by default with help of yarn reset.
db.configyou can configure your database credentials for development and production.
Routes have files with all available routes and you can see that particular routes have passport middleware and some do not, this is a great feature if you need certain routes to be reachable by authorized users and unauthorized.
Services are made following an abstraction pattern. Basically, service imports methods from the api and gives you a nice and clean way to harness CRUD functionality and have readable and clean code, enjoy!
Config has all the configurations, just update the values and your config is ready, as simple as that.
All magic happens at the Index file, this is where your node js app starts!
I believe you will find a lot of new interesting code and development practices exploring source code. The file uploading module is really powerful and important for every app. After you got a gist of this code it will be extremely easy for you to add new routes and enhance functionality. The code is readable and even if you don't have a great experience with node and expressjs you will be able to make full use of it.
Good Luck!Live demo
- Products listing
- SSR (SEO-friendly)
- SEO module
- 2 Dashboards (for admin and customer)
- Content moderation
- Stripe integration
- Static & Hover Sidebar
- And even more coming soon!