Engineered prototype for drone store - based on Figma design by Wahid Ari (link can be found in below). Principally completed this project to learn tailwindCSS and to learn how to dynamically generate graphQL types by using Graphql Codegen. Features: statically generated site, image loading optimized, typescript enabled.
Figma Project (credit: Wahid Ari)
🛑 Development status: main page and product pages developed. Other links have been left on site but are inactive (in order to keep faithful to the Figma design the site is based off of)
- Statically Generated Pages (via getStaticPaths and getStaticProps) - used for significantly faster load times
- Blurred image thumbnail loading - used for better site experience for users with slow internet connections
- Advanced use of tailwindCSS (including use of its “Just In Time Mode” feature)
- Automatic Graphql Type generation via Graphql Codegen (https://www.graphql-code-generator.com/)
- Typed react context usage, allowing for an awesome developer experience via VSCode intellisense
- A+ lighthouse scores in the following categories: Performance, Assessibility, SEO
Superplate is a well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, >Bundle Analyzer and 30+ plugin. For now, only creates projects for React and Next.js
The boilerplate for this project was generated with superplate. The superplate CLI helped me generate a nextJS project that included apollo client, styled components, tailwindcss, typescript capable linting configurations, as well as bundling in some helpful libraries such as react-use. I find that time spent configuring these technologies can often detract from the developer experience. As the goal with this project was to quickly bootstrap itand spend more time developing than configuring, this was a natural choice.
TypeScript is a strongly typed programming language which builds on JavaScript giving you better tooling at any scale.
My main interest in using TypeScript here was to learn how to generate types for graphql queries. This was accomplished by using the graphql code generator. This allowed me to take my graphql schema generated by strapi and get the appropriate types for it. Then when I used data from my graphql api as props, the types allowed me to access every property of every object queried from bmy strapi backend. The learning process was a little rough but as a result of it I feel my powers as a developer are greatly enhanced. I'm looking forward to using this tech on a bigger project, where the utility of this kind of tech will really shine.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Go To Documentation
This was my first project using tailwindCSS. It is known for being a highly effective css technology with the drawback of having html with a large amount of class names. Despite this drawback, I still found it much easier read and to develop responsive designs than with any technology that I have used previously (such as bootstrap, material UI, and styled components). Were I to develop this app further I could easily see clearing this issue up by defining custom tailwind classes that are composed of several individual classes, in addition to further abstracting code into React components where necessary.
"The React Framework for Production" Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
Next.js is by far the most exciting tech to come to the web development scene in recent times. Its page based routing system and ability to easily switch between server side rendering, static generation, incremental static generation, etc. make it a powerful tool for any react developer. In this project I used its static generation capabilities, as it has no real dynamic data. In theory if this project were used to bootstrap a live app, a combination of these rendering modes would be used where it necessary.
The main reason why static generation was chosen was to avoid the pitfalls that often come with hosting applications on the cheap. Heroku, where I chose to host my backend goes to sleep after a rather short time interval. This means that when someone tries to access the site after a while in which it was not accessed, they will be forced to wait several seconds for the dyno to boot up and load the page. With static generation I only need to hit the heroku (strapi) api once at build time. What about updating site content? There is a build hook enabled through strapi that triggers a rebuild of the statically generated next.js app. It takes a couple minutes for the site to go live after the changes are published by the site admin. Beyond this build time caveat, static generation is a loved feature because of how fast loads and how well it performs for users of the site.
In a future ecommerce application I am to allow for the best of both worlds. The admin's preview page would be rendered live via server side rendering whereas the side of the app that the public sees would be statically gnerated. Such is the benefit of next.JS
Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.
Strapi is a tool used to quickly generate backend api's. Its name strapi is derived from -strap as in bootstrap and api... so as to bootstrap an API. As a developer concentrated primarily in front end matters I find that strapi meets most of my projects' needs. In my experience it has been a way to generate powerful backends in a way that is astonishingly uncomplicated and yet very capable. As easy as it is to manage data through the strapi provided admin UI, I have also had success performing queries and mutations on my database via graphql, my preferred way of interacting with application api's. Strapi, unlike some other headless CMS's, allows for self hosting (an important feature for me). I have hosted the backend for this application on heroku.
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, >>and modify application data, all while automatically updating your UI. Go To Documentation
Generate code from your GraphQL schema and GraphQL operations with a single function call regardless of your environment or code format. Go To Documentation
A Collection of useful React hooks. Go To Documentation
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease. Go To Documentation
An opinionated code formatter; Supports many languages; Integrates with most editors. Go To Documentation
Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.
Developers and marketers use Cloudinary to quickly and easily create, manage and deliver their digital experiences across any browser, device and bandwidth.
MIT