Xplorers Website

This is an Xplorers website project. It will be first place stop for everyone to understand who Xplorers are and what we do as a group of friends in this community. We will include our events, blogs, informational contents, pictures of our past collaborations and outgoings, any many more. So, hit ⭐ and stay updated! 🥳

Getting Started

First, install the dependencies:

pnpm install

Run the development server:

pnpm dev

Run a snyk scan localy If snyk is configure do a local snyk test Setup Instruction: Here

snyk test

Open http://localhost:3000 with your browser to see the result.

Tech Used

• Library: React
• Framework: Next.js
• CSS: Tailwind
• Component library: Shadcn/ui
• Design link: Figma
• Project management: Github Project or checkout issues

Design System

Typography

• Open Sans is used for body text
• Work Sans is used for headings
• Fonts can be easily configured from fonts.ts file
• Nextjs font is used to generate two variables --font-body and --font-heading which is used in both global css and Tailwind config
• Default font size is defined for headings in globals.css

Colour

• Custom colors, primary and secondary, is added in Tailwind config
• Both custom colors can be used like a Tailwind utility class
• For ease of use, a default shade as primary and secondary, can also be used which is the same as the shade 500. Eg: text-primary, text-secondary.

Note: Please review the Tailwind config file and the globals.css file to get acquainted with the custom classes and styles implemented in the project.

Using Shadcn/ui

We will be using shadcn/ui for our reusable ui components. It's not a component library, but helps to build our own component library with our own styles. It's built with radix-ui and tailwindcss.

The reason we are using this is it's very easy to customize, highly flexible and at the same time provides accessible components that are ready in terms of functionality. Moreover, you don't have to install the whole library as compared to others like mui, chakra, ant, etc. You can either use cli or manually copy paste to use individual component.

Project structure

• Place the UI components such as button, input, modal, card etc. in the components/ui folder.

• Modules: Added modules folder where each page is a module e.g. modules/about-us. Create components inside the module.

  E.g. about-us/OurMission

  modules
    about-us
      OurMission
  

• The rest of the common components such as <PageHeader /> and <MainNav /> should be placed in the components folder. If there are multiple components related to each other create a folder for it.

  E.g. Card/CardHeader

  Card
      CardHeader
      CardTitle
      CardFooter
  

• The lib folder contains all the utility functions.

• The styles folder contains the global CSS.

All we need to do now is follow command to install components using cli. E.g. for button

npx shadcn-ui@latest add button

Or, you can manually copy paste code of the components and put it into this folder structure src/components/ui/button.tsx

Branching and Commits strategy

For branching, please follow below style:

feat/issue-1_header
bug/issue-10_login_auth

i.e. provide relevant information regarding your work and include issue no. if exists

For commits, please follow Conventional Commits structure. There's workflow setup which checks commit messages on each commit.

Contribution

The project is in development status. Any contributions are welcome! Feel free to submit pull request or create the issue.

Support

If you like the project, please feel free to ⭐ this repository, It motivates us to build such cool projects.