Introduction

During my time as part of the Lighthouse team, I had the pleasure of working closely with the Grazziotin Group client. This was an enriching and challenging experience for me, and in this article, I'll share insights about the development of this extensive system that involves the website, app, and admin/CRM panel for Grazziotin.

The Project

"Grupo Grazziotin" is a network of clothing and accessories stores. Our goal was to create a digital platform that provides customers with an excellent experience for exploring new offers, opening credit accounts, and paying their bills. Here are the key components of the project:

1. Customer Portal:
   • The Customer Portal is a React-based website that allows customers to access their invoices and pay them online.
   • We used Ant Pro as a boilerplate to streamline development. Ant Pro is built on React and Ant Design, providing a solid foundation for the user interface.
2. React Native App:

• We developed a mobile app using React Native, offering similar functionality to the website.
• Redux was used to manage the application state, and Styled Components were employed for component styling.

3. Administrative Panel:
   • We created an administrative panel for store managers to handle operations.
   • Managers can review pending customer invoices and enable specific features for app users.

Technologies Used

Frontend

• Ant Pro: Leveraging Ant Pro as a boilerplate accelerated frontend development. It provides reusable components, responsive layouts, and a consistent user experience.
• React: Choosing React allowed for modular and efficient UI development, as well as significant code reuse across the three project fronts.

Backend

• Egg.js: We opted for Egg.js as the backend framework. Based on Express.js, it offers a robust structure for developing RESTful APIs.
• Oracle DB: The Oracle database was chosen to store critical data, such as invoice and transaction information. This decision aligned with the client's existing Oracle infrastructure.

Challenges and Solutions

1. Frontend-Backend Integration:
   • Ensuring efficient communication between frontend and backend was crucial.
   • We implemented RESTful APIs in Egg.js to supply data to both the frontend and mobile app.
2. Security and Authentication:
   • User authentication was implemented using JSON Web Tokens (JWT).
   • Sensitive routes in both frontend and backend were protected to ensure data security.
3. React Native App Development:
   • Learning and applying React Native concepts posed a challenge.
   • We created payment and credit screens in the app, ensuring a seamless experience for customers.

Conclusion

Being part of the Grazziotin project development was an incredible opportunity. We learned a lot, faced challenges, and delivered a complete system that benefits both customers and store managers. The combination of modern technologies—such as React, Ant Design, and Egg.js—resulted in a successful and impactful project.