SHOUT ABOUT - the dynamic portal with the interactive product catalog
Tech stack:
- Next.js
- React
- Formik
- Swiper
- Lightbox
- GSAP
- Styled Components
- Axios
- SERVER: node.js -> Express
- SERVER: MongoDB -> Mongoose
- SERVER: Nodemailer
- SERVER: aws-sdk
- SERVER: multer
- SERVER: sharp
- SERVER: jsonwebtoken
- SERVER: Express validator
- SERVER: mjml
Description:
technicals
The complete application consists of 3 large parts: frontend of the customer portal, backend - API on the server connected to the database and cloud and frontend of the admin panel. The portal application is developed in Next.js and operates as an SSG / ISR. Provides static files that are always available to index robots and can be opened extremely quickly by browsers. However, in each of the views, where it is necessary, additionally SWR was used in order to provide users with the most up-to-date information about the products, their status, etc. The application generates and revalidates static files based on data downloaded from a private API connected to the database and AWS cloud. From the same place, the latest data is downloaded by the SWR always anew when using a given view.
On the main page, sliders have been created using the Swiper library, but have been significantly modified, which makes this view original. Products and data presented in sliders are always up-to-date, they are downloaded via SWR from the backend when the view is used.
All forms have validation on the front (and additionally validation on the server) and their condition is managed thanks to Formik.
The communication tool available on the "sell" page allows you to collect data from the user and upload images with a real preview of the loaded graphics. Thanks to this tool, the user can send a application of the resale of his products in a strictly defined form, and the supervising company can collect and manage such proposals.
On the portal pages, on the product subpages, a custom infinite scroll type solution was implemented, which "adds" new products with the API at the moment of the appropriate scroll position.
The private correspondence view (secured with a token) has also been implemented, which allows you to follow messages in one place like in a chat, but the entire message exchange is carried out using Nodemailer. Messages can be exchanged both in relation to individual products and in general. The correspondence is stored in the database.
Portal users receive e-mails with notifications on e-mail templates made individually in Mjml.
The application has been carefully managed with errors - the user is never left without information about what is happening in the portal or if something has gone wrong.
API / backend adds full mechanics relevant to data management by the administrator, which is described as a separate project. Sever application is also the data base for this portal.