#wecode Landing Page - WeCoded Challenge March 2025
#wecoded#devchallenge#webdev#react
Shaktijeet Sahoo

Shaktijeet Sahoo @deathcrafter

Location:
Odisha, India
Joined:
Dec 1, 2021

#wecode Landing Page - WeCoded Challenge March 2025

Publish Date: Mar 8
27 2

This is a submission for the WeCoded Challenge: Celebrate in Code

My WeCoded Landing Page

On the forefront, I have incorporated a landing that covers a number of people, from different genders, races and religions. The idea is to let people feel welcome, and united, the first step to inclusivity.

NOTE: For now, if you go through the code, only male and female genders are used as those are the designs from Humaaans but these can be updated using more inclusive designs.

The later sections are ripped off from the current landing page, with an addition of Winners section as we have a challenge this year.

Demo

NOTE: Due to an issue with Tailwind being a native module, the app cannot be bootstrapped in StackBlitz or CodePen, so this is an embedded iframe that links https://deathcrafter.github.io/wecoded-landing.

How I Built It

The following technologies and assets are used to make the landing:

  • React (Vite/TS)
  • TailwindCSS
  • [Asset] Humaaans Illustration Set (by Pablo Stanley)
  • [Asset] Illustrations from Freepik

The app is hosted on Github Pages, with the demo embedded in StackBlitz. For better experience, go to the site: https://deathcrafter.github.io/wecoded-landing

Repository:

GitHub logo deathcrafter / wecoded-landing

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

You can also…

View on GitHub
Aspects Covered:
  1. Look and feel.
  2. Functionality.
Aspects Not covered (I am a bit short on time):
  1. Responsiveness
  2. ARIA-based accessibility.
  3. Small things like navbar and footer as I felt like those are supposed to be handled by the platform, e.g. would be identical to the one in primary site.

Comments 2 total

Add comment