NFC Wear is a brand that sells NFC tokens in a wide range of options. Those tokens then lead to a landing page built by a user by configuring its name, description, and links.
There is a predefined template that is made to accommodate as little as a logo and a name, at the same time being able to contain plenty of useful functions, such as buttons with links, YouTube videos and shorts, a footer, description, and a few footer link logotypes.
To achieve this result we developed a custom front-end solution consisting of two main steps.
- Admin panel with user management, page management, as well as preview capabilities
- Landing page for the general public to enjoy.
Client requirements
- Ease of use
It is an important part of the project: partners using NFC Wear landing products are free to customize their landing pages however they want. It was crucial to provide a positive user experience and a similar user interface to avoid any inconveniences; - Security
Each user must have access only to their own content. It was handled primarily by the back-end side of our application using NestJS; - Full template customization
A template should be as customizable as possible without impacting user experience in the process. To ease user experience we used Drag and Drop mechanic to allow the change of order of items in a given group. For example, the order of YouTube videos can be changed by dragging and dropping an element above or below its sibling;
Architecture and project details
Next.js is perfect for generating our landing pages from templates. It allows us to handle URLs simply and effectively. We can configure it to manage any URL appropriately, which was crucial for our project. This is why we chose Next.js as our main frontend tool.
We also created a user-friendly admin page using Next.js. This admin panel is easy for customers to customize. Using React, we built a detailed landing page creation tool. For example, we made sure that dropdown menus do not show duplicate social media options.
For the backend, we chose NestJS to securely handle data between the frontend and backend.
Input validation
Validation of the user inputs is done twofold.
- We used Formik for basic input validation. It helped us manage error handling efficiently by displaying error messages when specific conditions were not met.
- We added another layer of validation for combined data values, like element order or names and links. This two-step validation saved us a lot of time.
User authentication
We used JWT tokens for simple and effective authentication on both the frontend and backend.
Styling
We decided on Tailwind CSS for styling. Combined with React components, it allowed us to create reusable components. It allowed us to save development time on preview and real landing components as there were only a few changes between them.
Outcome
The admin page we developed is secure and easy to use for managing landing pages. Using Next.js, we created a simple component to handle public traffic efficiently. Thanks to the quick MVP development and the component-based approach with Formik and Tailwind CSS, the system is ready for future updates and new features.
