Electronics eCommerce Shop With Admin Dashboard in Next.js and Node.js

Electronics eCommerce shop with admin dashboard in Next.js and Node.js is a free eCommerce store developed using Next.js, Node.js and MySQL. The application is completely built from scratch(custom design) and completely responsive. Singitronic is a modern online shop that specializes in selling all types of electronic products. The goal of the project is to create a modern web application by following key stages in software engineering. Originally created by me and my friend Bojan Cesnak (@cesnak02) as part of our college exam in Software Engineering, this project has now evolved into an open-source community project. Together with the application, we created detailed 40 pages software engineering documentation. We will describe the main parts of the documentaion in the repository description. Main resource for the software engineering documentation is the book „Razvoj aplikativnog softvera“ by Singidunum University professor Violeta Tomašević. Also, college lectures by Violeta Tomašević and Petar Kresoja helped us a lot with the implementation of the application.

More work

Car Parts Company Official Website in Next.js

Luxury Cosmetics eCommerce Shop in Next.js

Premium Custom Admin Dashboard

Premium Fashion eCommerce Shop

2. Software engineering process

During the design and modeling of the software, we decided to use the cascade model(waterfall model). We decided on it considering its simplicity, easy project monitoring and easy application of the model. The cascade model is probably the oldest published model. It was first published in 1970 and represents a high level of abstraction. The stages in the model are connected in cascade, and the model itself is organized so that the next level is passed only after the completion of the previous level.

2.1. Defining milestones

Milestones are key events in the project that show us by what date something must be finished. At this stage, we defined our milestones for every stage in our software engineering process.

2.2. Plaky - Project management application

The Plaky application was used for project management and project tracking. It is a free application that facilitates collaboration between team members and enables easy export of project reports in one click.

3. Requirements analysis

3.1. Software requirements specification

At this stage we defined all our functional and non-functional software requirements regarding to the whole application. Also we defined requirements that define the connections of the system with the environment and performance requirements that the system should meet.

3.2. Modeling the system with a use case diagram

The Use Case Diagram represents a detailed description of the functionality of the system in different situations. It describes the steps and actors involved in each situation. The use case diagram is used as a basis for further design, implementation and testing of the software.

The image above represents our ecommerce website use case diagram. Here we have also defined main success scenarios and alternative scenarios for admin and users.

4. System design

System design is the software engineering stage that transforms concepts and requirements into tangible software structures. It is the strategic process of defining the architecture, components, and interactions of a software system to fulfill specific functional and non-functional requirements. In this stage we wrote about the type of system architecture. We defined our front-end and back-end and we wrote about structure of front-end and back-end in our application. We defined our data structures, database structures and important types in our application.

5. Software implementation

Software implementation is the process of converting a software design into a functional software system. This is where all programming should begin. When you are in the software implementation stage, it is important to take care of the internal documentation. This documentation includes headers and comments that provide basic information about the component and explanations of specific parts of code. Thanks to these elements, we are easier to manage in code and we better understand what we have done, which contributes to more efficient work and maintaining software projects.

6. Testing

Testing is a formal process that is performed by the testing team with the aim of determining the logical correctness and purposefulness of the tested program. The importance of testing is great because it significantly reduces the losses that software companies have due to errors and failure of software incurred after its delivery to the customer. We have done the entire testing process manually and documented everything in detail.

The test scripts represent the instructions from which it is clearly seen as a step by step how the testing was performed. They provide full control over testing, so, if some errors or cancellation occurs, testing conditions can be repeated and the system again lead to that error or cancellation. This is necessary to establish the cause of the problem. As the above image shows, we documented each our test example in terms of test ID, input data, instruction, expected result, actual result, additional comment, component, method and testing technique. Currently, our test script has over 350 manually tested examples.

During the software testing process, we documented each error found in the error report form. As shown in the image above, each error has its own unique error ID and a detailed description of the error containing: date of identifying an error, date of troubleshooting an error, error priority, type of error, file name, testing phase.

6.1. Ad hoc testing

The first step in software testing after each new added functionality in our application was ad hoc testing. The ad hoc testing takes place in an unofficial atmosphere. The developer presents the code to the rest of the group and then the discussion occurs. The members of the group ask questions, the developer corresponds to them, together analyze individual implementation aspects that they consider significant and try to find mistakes. We have applied this method by examining the code after each new added functionality and had long discussions about it and the potential problems that may occur.

6.2. Component system hierarchy

The component system hierarchy of the application components is a complete sketch of all components in our application created in Figma design tool. This sketch is very important to us when testing, because it represents an insight into the order of the component testing. The below image represents our component system hierarchy from the bird eye view:

6.3. Unit testing

Unit testing for our application includes the process of testing individual functionalities or application components, to ensure each of them work properly independently. The goal of unit testing is to identify and correct errors in the early stages of development, increase the reliability of code and facilitating future application maintenance.

As the image above shows we found a total of 75 errors in unit test of 103 total errors found, which in our testing unit testing had the highest efficiency with 72.8%. During unit testing, we used the black box and the white box method. The techniques we used for testing were:

The black box method:

1. Equivalence partitioning
2. Boundary Value Analysis – BVA

The white box method:

1. Statement coverage
2. Decision coverage
3. Condition coverage

6.4. Integration testing

In integration testing, we used the approach "Integration from the bottom to top". This is very used approach in integration testing. This method starts from the components of the system organized in the hierarchy on which the main program is located. Testing starts by unit testing all components located at the lowest level in hierarchy. The components are then tested at the next level that calls previously tested components.

As the image above shows we found a total of 28 errors in integration testing of 103 total errors found, which in our testing, integration testing has efficiency with 27.2%.

6.5. End-to-end testing

End-to-end testing is the highest, final level of testing. It is checks whether the system, as a whole, acts in accordance with the specification of the requests set by the customer. Since most functional requirements have already been verified at lower levels of testing, now emphasis is on non-functional requirements, such as speed, reliability, efficiency…

6.6. Error records at a specified time interval

During testing, we recorded the found mistakes by days. The next diagram helped us know how to know how our testing progresses.

As the image above shows, the number of errors increases day by day, so testing must continue. Throughout 4 days of testing, we managed to find a total of 103 errors.

6.7. Analysis of errors found

During testing, we also conducted the error report form that we have already mentioned in the introductory chapter on testing. This document has helped us significantly in order to document all the most common types of mistakes in our application, which shows the image below.

Singitronic – Key features

Singitronic is Next.js and Node.js full-stack e-commerce website with a free source code. Our application comes with the fully functional admin panel and it is fully open-source. Our free online store website is completely responsive and manually tested. You can use our e-commerce project as a template or boilerplate for you next project. Our ecommerce shop template and Next.js ecommerce theme is fully customized for all your needs. It is available for free download and can be used as an ecommerce example for all your future projects.

Is Next.js good for eCommerce?

Next.js is currently one of the best ways for developing custom eCommerce solutions. It’s benefits include improved performance, SEO-friendliness, easy development and deployment, excellent developer experience, and the ability to handle versatile and scalable projects. By leveraging Next.js, developers can create compelling web applications that deliver an exceptional user experience while maintaining optimal performance.

Step-by-step video instructions for running the app

https://www.youtube.com/watch?v=Ry0aOMws0gE

Instructions

1. To run the app you first need to download and install Node.js and npm on your computer. Here is a link to the tutorial that explains how to install them: https://www.youtube.com/watch?v=4FAtFwKVhn0. Also here is the link where you can download them: https://nodejs.org/en
2. When you install Node.js and npm on your computer you need to download and install MySQL on your computer. Here is another link to the tutorial which explains how you can download and install MySQL on your computer: https://www.youtube.com/watch?v=Bxd