What is it?

With all the buzz around Next.js, I decided to give it a try by building, yes, another irrelevant e-commerce website which accomodates both products (measured by quantity) and services (measured by hourly rate). The landing page is basically filler promotional material to emphasise the website's brand.

Upon entering the marketplace page, users are greeted with listings of products and services filled with comical images and descriptions from my friends. For each product, there's a summary coupled with reviews given by past customers. Orders can only be created by registered users.

Ordering a product/service is as straightforward as it gets, but the scheduling calendar can be regrettably unintuitive.

Both consumers and sellers can view their past or pending orders. Simple charts and tables summarize sales data for sellers.

Not only do users have their own profile page, they can easily chat with one another to negotiate business.

Database Considerations

For the sake of simplicity, Firebase is used to store user data and authentication. Its biggest appeal is that authentication (via email/Google/Facebook etc.) is provided out of the box with minimal setup. Firebase has no fixed schema and relies on arbitrarily defined nodes. The authorization of reads or writes are defined via Firebase security rules. While this lack of a typed schema makes for easy prototyping, it is equally easy to push data with wrongly-named fields or data type.

        It is also harder to define relationships between data compared to relational SQL-based systems. Firebase only provides a limited set of filter and sort configurations. SQL joins and custom filtering algorithms are not available and must be implemented manually. In fact, custom sort/filter algorithms can only happen on the client or proxy server after the data is retrieved from Firebase. This means that the client device must bear the brunt of the sort/filter computation. Nevertheless, the disadvantages mentioned do not pose much of an issue as this project's scope is still manageably small.

Asset Storage

Cloudinary is a CDN used to store any user-uploaded images and videos with quick download/upload speeds. It is chosen due to the generous free tier.

UI Design

To avoid building and styling layout elements from scratch, Chakra UI was used as an opinionated baseline which could be easily customized. In addition, Framer Motion helps to breathe interactivity into elements of interest. Its flexible tweening and spring-based system enables the creation of animations limited by my creativity (and user experience as well, nobody wants to wait for long animations to complete).

Conclusions

It has been a enlightening experience piecing the website together with React, Next.js and Firebase.

• Next.js's ability to leverage both SSR and CSR led to a satisfying balance between performance and client-side interactivity.
• Designing interfaces with Chakra UI felt much more pleasant than Material UI.
• Prototyping with Firebase was quite painless with the in-built authentication and simple JSON structure, but most of the headaches came from designing for authorized writes/reads and crafting relationships between entities.
• All hail the tech companies for their generous free tiers.