Nivoa App

My project submission was rejected because I hadn’t included the functionality to edit the basic profile information, name, and phone number. I’ve added that functionality now, and more features will be added soon. For now, I’ll submit what I have so far for Flavortown approval. Here’s a screenshot of how to edit the profile.

This won’t be the last devlog, but I’ve finished the beta version. There are still too many bugs to fix, discover, and several improvements to make in future updates. During this time, I worked on the registry, changing, modifying, and adding new features. I also worked on the home tab and finished the entire order system, authentication systems, databases, etc. Now all that remains is to work on and maintain the graphical interface.

I’ve been working on exactly what I mentioned before: in the modal window that displays detailed product information, I added the long product description and also limited the number of images to a maximum of 5 per product. I also used pricing psychology to highlight products on sale. With this finished, the rest of the project will focus on finding and fixing errors, creating a more responsive design, and implementing error handling for passwords, accounts in use, etc., in the registration and dashboard sections.

I’m currently redesigning the test version to better organize the information by adding icons, long descriptions, etc. Next, I’ll work on the product page design, fixing the structure of the product component and limiting the number of images to a maximum of five when adding products. I’ll also modify the product section in the admin dashboard.

I put a lot of work into this devlog. The first change I made was to give the user a history of individual orders within the “Orders” collection in Firestore. This way, when a user deletes an order from their dashboard, the order they placed isn’t deleted. I also modified the “Add Products” section with a design more in line with the interface and added a modal window that opens when the user clicks on a product to provide more information.

I finished designing the order system. I made a small change to the product component by restyled-the action buttons. Right now, I’m refining the user registration process so that each order includes more user information. Once I’ve finished the registration changes, I’ll go to the user’s shopping cart section to add more information to the product component, including the shipping address, before placing an order.

I’m still working on the design and appearance of the system that provides information on incoming orders from users or clients. I’ve been working a bit with DeepSeek to help me with the table design, as I couldn’t find something more natural and minimalist. I’m going to adjust some things, such as the spacing of the order delete buttons and the height of the side modal window that displays the order information.

Yesterday I was working on the responsive design of the order form, but I didn’t finish. I’m having some trouble positioning the modal window that displays information about the selected order, so for the duration of this devlog, I’m going to show the new logo on the homepage and continue working on the fixed order form design because the modal window keeps getting misplaced.

I worked on the order status system. In Firestore, I created a new class called “status” which is part of the order documentation. The platform administrator can manage the order status for each customer. For example, the order status might initially be “pending.” When payment is processed, the administrator clicks “next status,” and it updates to “paid.” The same process occurs when the order is shipped. There are only three statuses: 1: Pending, 2: Paid, 3: Shipped.

I’m working on the order system. I’m making it so that user orders arrive at the control center in the orders section. Each order is divided with its respective information. I’ll add dynamics to manage the order status from the administrator user, and in future updates I’ll add more important information for each order as it’s generated, as well as a clean design that’s consistent with the application.

Here I worked on the shopping cart page, which displays the user’s cart data uploaded to Firestore. It currently looks like this, but it really needs an improved design. I also need more product information to be displayed, something less lengthy, so that clicking on a product in the cart opens a modal window with complete product details. Additionally, there will be an order placement component and, of course, a brief summary of the completed purchase.

I’m working on a shopping cart system so users can add products and then place an order. The products added to the cart are saved in Firestore, and the entire application uses Firestore to maintain persistent data for logged-in users. The products added to the user’s cart can then be ordered.

I’m working on image handling. When adding a product, two product images are selected and uploaded directly to Firebase Storage. The link or URL is then used to view the uploaded image. The image URLs are also stored in Firebase Storage because they are part of the product information. I had to purchase Firebase Blaze to run these tests.

Before moving on to the purchase and order logic, I’m improving some simple aspects of the authentication system’s graphical interface. I’ve added small new components such as a back button, login text, password display, and a set of mandatory rules that users must follow to create a strong and secure password. Now I’m going to add the back button to the login screen and display the password.

I worked on the design of how everything will appear in the store, I added the technology and home categories, connected the product database in a container and added the add to cart button, the next step will be the logic of adding to the cart with a Firestore subcollection for each user, and also that the order is applied in real time and notifies the administrator immediately, the order information and status should appear in the order.

I’m working on the shopping section, which will feature thousands of products across various categories that can be ordered. The design is completely clean, and so far I’ve only added the technology and home categories. The current content is a template or reference to show how the shop’s components are structured. The products in the store include the necessary basic and simple information.

I’m working on the profile page for logged-in users. It will include a profile picture, name, gender, and a list of orders they’ve placed. I’ve also added a logout section and a section for editing profile information. The design is clean and well-structured.

I’m working on the dashboard, in which I’m going to include general information about the business. First, I’m going to leave a template in place to have a design reference, and what I did was add a tracker of authenticated users who use the website, as well as a counter of available products and the number of orders. I’ll add the logic later.

I’m working on the database for the products. For this, I use Firestore, and in a collection called “products,” I store each ID. In those user IDs, I store the products they selected in documents, with simple and basic information, such as the product title, price, and also two corresponding images. All the images are stored in storage.

I worked on the dashboard design, implementing a static design before adding backend logic for orders, reports, the dashboard itself, etc. I added a view state to render the component when the dashboard, orders, products, etc., are selected. Next, I’ll finish the static design so I can continue with the backend using Firebase. The next step in Firebase is to create a real-time database for the products, so the administrator can upload them and they appear to the customer or user in real time.

I’ve been working on the backend, creating an authentication system for regular users and the admin user with Firebase. I’ll be improving the UI and the login and registration design; it needs other components like a back button, Firebase error handling, etc. Now I’ve started working on the admin user’s dashboard so they can manage all the products and orders being processed.

I’ve finished programming the homepage, now I’m working on the backend. I’m going to connect the Firestore database to the project by creating a folder called utils, and within that, I’ll create a firebase.js file to initialize the app and obtain Firebase Auth, Firestore, Storage, and Analytics. For this project, Node.js will handle some things like security, etc.

I improved the design of the initial product catalog; it’s now better suited to the website’s theme. I rounded the edges to create that connection. I also added a button at the bottom to direct users to the store with the full product catalog.

I added new content and information to the main page. What I will do now is apply responsive web design to those sections. In addition, I will modify the main product catalog and also change some of the planned images.

Suddenly, I thought the design should be more eye-catching with a minimalist touch, so I changed the design of the homepage and also applied responsive web design with a little help from AI. Now I will be working on the product catalog and more content and information for the

I’m working on the mobile navbar. The yellow component below is the section and location where it will go. Important quick-access icons will be placed there, such as going to the home screen, the shopping cart, and the user profile. I’m using Flaticon for the icons, and this navbar will be zinc-colored.

I’m working on the website’s navbar, and also implementing responsive web design at the top of the page. Every time I create a section, I apply responsive design; I think it’s a good practice to avoid getting bogged down with the design later.

I initialized the project with vite, installed tailwindCSS, added and modified folders, and now I’m going to start working on the navbar component so I can launch the main page.