fprl / big.dk-clone_client

A big.dk clone with Next.js + Styled-components!

Bjarke Ingels Group | Clone (client)

Original · Live Demo

About the clone

The aim of this clone is to improve the BIG (Bjarke Ingels Group) website which is made with wordpress, a custom plugin and the Canvas API and which lacks of responsiveness, accesibility, performance and SEO based on the lighthouse report.

This clone also helped me to get a workaround to the flex-direction: column; css problem.

About the Headless CMS (repository): This clone — like the original — has its own CMS created with Strapi that allows the user to create projects in an easy and fast way, which automatically generates the necessary properties based on the project information (alphabetical, slug, scale) to use them on the client-side.

Improvements

• Improved lighthouse report
• Semantic elements.
• SEO improved.
• Responsive design that works with mobile, tablet and desktop.
• Search bar for projects.
• Each project has it's own page (SEO improvement) with it's own slug based on the project name provided in the headless CMS.
• Color contrasts corrected.

Made with

• Next.js
• styled-components
• Axios
• react-easy-flip
• react-spring
• Vercel for deployment.
• Strapi as a Headless CMS => repository

Installation and start

To get a local copy up and running follow these steps:

1. Clone this repo and headless cms repo

   $ git clone https://github.com/francoromanol/big.dk-clone_client.git 
   $ git clone https://github.com/francoromanol/big.dk-clone_server.git

2. Install packages on client and headless cms

   $ yarn install

3. In .env.local file (client)

   CMS_HOST= [CMS HOST]
   CMS_LOCALHOST= 'http://localhost:1337'
   NEXT_PUBLIC_CMS_LOCALHOST=$CMS_LOCALHOST

4. Run client and headless cms

   $ yarn dev # client
   $ yarn develop # headless cms

Once started the client app should be available via localhost:3000 and the headless cms via localhost:1337

Have a great day!