Project description:
Developed for a client in the United States who is developing an innovative terminal like Bloomberg, but for cryptocurrencies. They needed a modern, interesting design, but I also wanted their site to be highly optimized and have amazing loading speeds.
The original project was located at www.satoshiterminal.io, but technical work is currently underway on it.
I chose Next.js 13 (App router) for this task, which uses the latest server-side features of React.js and is perfect for creating stunning and super-fast web applications and sites. Also, this project will only develop and Next.js works great with various APIs and has a very wide potential for the growth of the project.
The design was developed in Figma based on various presentation slides that the client provided me. This was quite an interesting task, as I had to assemble the disparate information I had learned into a final design picture.
Initially, the project had much more animations, unfortunately, at the very end the client decided to stick to a more strict style and abandon them. I used a super lightweight animation bundle, React intersection observer + Animate.css. Because Framer Motion and React Spring are too redundant for simple animations.
The waiting list is based on React hook forms and additionally has an API check on the server. The form then sends the information the user provided to Google Sheets. The contact form also has similar options. Well, in addition, Google captcha was configured (via API Next.js 13) against spam.
Next.js 13 has excellent performance
By embracing Next.js developers can engineer websites that excel in both user experience and search engine rankings.
Next.js 13 - Server side
New server components can simplify tasks that traditional APIs solved
Responsive design
The website is absolutely responsive on all devices.
Ready to
work with us ?
Get A Quote
Technology:
- Next.js 13
Next.js is a free and open source web application framework based on React.js, Node.js, and Express.js. It is used to build static and dynamic websites and web applications.
- React Interaction Observer
React Intersection Observer is a React component that adds Intersection Observer functionality to a React component. Intersection Observer is a browser API that allows you to determine when an element is visible in the viewport.
- React.js
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
- React hook forms
React Hook Form is a library for building forms in React.js. It is based on uncontrolled components and provides a very simple API to create forms with validation.
- Css modules
CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions. This behavior makes CSS Modules the ideal way to include component-level CSS.
Result:
As a result, the site has excellent loading speed and optimization is also strict but at the same time interesting design suitable for corporate purposes.
It will draw attention to this innovative product (Satoshi Terminal), which is still under development, which may help attract additional investors to this project
The project will only develop in the future, I hope to take some part in this, it was extremely pleasant to work with this company.
In a word, Next.js is suitable for creating not only large projects and complex applications, but it is perfect for recreating a high-quality landing page with an individual design while having excellent loading speed and generating all the necessary meta tags, including social networks.
- Project URL:
- Technology:Next.js 13 (App Router)
- Location:Usa, Dallas
- Project type:Landing page
- Duration:1 week
