This is a frontend mentor challenge exercise to build a website for Space Travel.
Website URL - https://space-tourism-umm9.vercel.app/
Storybook UI Component library - https://645f6cf043b9eed632121c8d-xkrxhxavvy.chromatic.com/
----
----
- Next.js and React with Typescript
- Tailwind for styling
- Storybook for component library
- Deployment of Storybook with Chromatic
- Deployed with Vercel
git clone https://github.com/puyanwei/space-tourism.git
cd space-tourism
yarn install
yarn dev
Chrome's lighthouse report in dev tools helps developers analyse their websites in certain categories. Once finishing the site I used the report to improve performance and other categories.
More information about lighthouse reports here
- RootLayout (
Layout.tsxon the root of app) is the suggested place to load fonts (in their new way) which is done on the server. But since I need the Navbar on all pages, this needs to be added here too so there is conflict of having a server and client loaded component not being compatible. This needs to be done client side because of theactiveLinklogic, and there is no way to load via server and client on the same file or separating them - Multiple font loading does not seem to work with tailwind. The custom variable names do not seem to get picked up in
tailwind.config
- Storybook is unable to load if tailwind is using a reference to an asset in the public folder. In my instance, a reference for a background image which ommited the public folder in the url confuses Storybook into trying to find this when loading its css. Using the config
staticDirs: ["../public"],inmain.tdoesn't seem to work. - I Want to preview code in Storybook on how the component works, but now they've added a seperate file to show this on ALL components rather then have a tab within it which I find awful as it unnecessarily clutters storybook.
- Tried to make a preloaded image slider but maybe Next/Image is doing something under the hood. However did fix a lag issue, but can't help slower networks for this.