The new open source website for SheCodeNairobi website 🥳

Overview

She-codes Africa Nairobi Chapter

Hello Stranger, this is the official open source website for She-codes-Africa Nairobi Chapter, in collaboration with Open-source Community Africa Nairobi Chapter

You are welcome to make a Pull Request anytime to contribute to the website

This website will use this Tech-Stack:

If any other tool is to be introduced, we will have a discussion and agree on it. Feel free to join the discussion here

Design

The design for the website looks something like this: Image

The actual Figma Design file can be found here

The designs were made by Margaret W.N, be sure to connect on her socials and buy her a coffee GitHub, LinkedIn or Twitter

Contribution Flow

Contribution to this project will hopefully be very inclusive.

Step 1: Pick an Issue 😎

Step 2: Create a branch from the develop branch and make your changes 🌿

Step 3: Create a PR to the develop branch 😎

If you need help with any task, be sure to ping any of the maintainers for help. This is a project for everyone :-)

Getting Started

You can get started by forking this repo to your GitHub account.

Next step, Clone your repo and run:

npm install

// then run the app

npm run dev

Tada. It Twerks now!

So Don't be shy, GET INVOLVED 🥳

Comments
  • Dark mode for SheCodeAfrica-Nairobi-Website

    Dark mode for SheCodeAfrica-Nairobi-Website

    Hello! I'm suggesting that we add a dark mode for the website. Here's a modification I made using Figma. I'm requesting editing access if you like this. Link to prototype

    she-code-dark-mode-conribution (1)

    image

    enhancement help wanted OSCA-Nairobi oss-kenya 
    opened by zidanegimiga 12
  • Create the Banner component

    Create the Banner component

    The banner component should live in the /component folder in the root directory. This task might need more than one contributor so if you feel limited to work on it or might need help on it, make sure to reach out to the maintainers.

    • The banner component must match the designs as shown below banner

    • The second bit with the image should be responsive. If the user is on mobile, the image should disappear and just leave the text.

    This task should take a short time as well, so that we can finish the first sprint with it.

    In-case of any blockers, be sure to ping the maintainers.

    enhancement good first issue help wanted OSCA-Nairobi 
    opened by katungi 11
  • Add events section on the landing page

    Add events section on the landing page

    This PR closes issue #10

    Build the responsive events sections on the homepage

    Notes

    • The built design uses the sample events posters in the design from Figma.
    • From the design every event card has it's own design. Perhaps there can be a standard event card design if the intention isn't to upload a designed poster for the events.
    Screenshots

    Large screen view image

    Mobile view image

    opened by steekam 6
  • Can we have a review meeting?

    Can we have a review meeting?

    Hello Everyone,

    I was thinking we should have a review meeting to see how far we are and planning on what to do next. Seems we have done a lot of work and I super proud of the engagement this project has gotten so far.

    Which day works for you guys? I propose either today or tomorrow ( Wednesday 28th ). I couldn't find a way to contact all of you so I figured an issue will work.

    Kind regards, Katungi :-)

    help wanted question 
    opened by katungi 5
  • Build the events pane into the application

    Build the events pane into the application

    The task is to build out just the UI for the events portion of the application. The idea is:

    • Build the UI for the event
    • Feel free to isolate the different size cards as their own components for usability.
    • All components should be in the components folder to avoid Merge conflicts

    The UI looks like this: events

    enhancement good first issue OSCA-Nairobi oss-kenya 
    opened by katungi 5
  • Build out the call to action banner

    Build out the call to action banner

    The next section is to add a call to action banner ( For lack of a better word ) 😅 call to action

    Note: Pay close attention to the colours and the padding of the component. It should be centered.

    enhancement good first issue OSCA-Nairobi oss-kenya 
    opened by katungi 5
  • Change images on banner to fit the design

    Change images on banner to fit the design

    One of the contributors did an amazing job working on the banner. Shoutout to @johnGachihi.

    We however need help adding the correct images on the banners. This should be a good first issue 🥳

    good first issue OSCA-Nairobi oss-kenya 
    opened by katungi 5
  • Fix the padding and spacing between call to action and the events components

    Fix the padding and spacing between call to action and the events components

    These 2 components were well done but have some issues. The purpose of this task is to streamline the following issues"

    • The order according to the design should be, the call to action then then events components. Currently, it's the other way round.
    • They should have tge same padding and be aligned especially on bigger devices
    • On mobile their is some space between these 2 components that's not needed. It's too big. It should be removed
    • Finally, the Call to action component should have rounded corners

    Anyone willing to fix these issues?

    bug enhancement help wanted OSCA-Nairobi oss-kenya 
    opened by katungi 4
  • Refactor to use Layout

    Refactor to use Layout

    Next Js comes with a handy feature that allows you to add a static layout to all pages. Could be a good idea to potentially move Nav and Footer components to be in the layout component so that all pages will have a footer and a Nav.

    enhancement good first issue OSCA-Nairobi oss-kenya 
    opened by katungi 4
  • Add typings

    Add typings

    Issue #41 Add Typings to the event response object for best typescript practices.

    1. Added a typings.d.ts file containing all the types for the event response object
    2. Use the Event type in the files necessary
    opened by EspiraMarvin 3
  • Add Typings to the event response object for best typescript practices.

    Add Typings to the event response object for best typescript practices.

    The event from the events endpoint response has type any. Intending to add typings to the event response object for best typescript practices, and also help in response intelligent code autocompletion

    documentation enhancement OSCA-Nairobi oss-kenya 
    opened by EspiraMarvin 3
  • Add support for automatic code formatting and liniting

    Add support for automatic code formatting and liniting

    Closes issue #13

    Changes

    • Installed dev dependencies: prettier, eslint tools and config dependencies related to the project.
    • Uses a pre-commit hook to apply formatting changes with prettier and linting with eslint.
    • ESLint auto fixes what it can then displays errors and warnings with suggestions.
    • Prettier rules are specified in .prettierrc.json.
    • ESLint config is in .eslintrc.json which has react and typescript specific support.
    • The current rules and config are based on the respective tool's recommendation but the project maintainers can update the config as they see fit.
    • I have done the initial run of the tools in the components and pages directories, hence the huge line number diffs.

    Note I am not well versed with TypeScript so some of the fixes I have done based on eslint errors may not be ideal.

    Resources

    opened by steekam 0
  • Use Context API & get rid of the prop drilling of the events response.

    Use Context API & get rid of the prop drilling of the events response.

    After the events are fetched in pages/index.tsx, theres' drilling of props into other components: layout, eventspane and footer components. I intend to use context api to get rid of this prop drilling.

    opened by EspiraMarvin 2
  • Dark mode for SheCodeAfrica-Nairobi-Website

    Dark mode for SheCodeAfrica-Nairobi-Website

    The idea is to have a toggle button that allows one to choose either dark or light mode, but by default it goes with the user's device theme.

    A good guide, will be this prototype made by @zidanegimiga

    enhancement OSCA-Nairobi oss-kenya 
    opened by katungi 8
  • Fill in participation form - For OSCA

    Fill in participation form - For OSCA

    Hello everyone,

    If you have contributed to the project during the OSCA challenge, please fill in the following form IMMEDIATELY. https://docs.google.com/forms/d/e/1FAIpQLScOm_R7-vdulVLzB_pzw-BgzNIBagkQ6tnosuVquwAWbaiwHA/viewform

    Kind regards.

    help wanted 
    opened by katungi 0
  • Build out the Blog section of the landing page

    Build out the Blog section of the landing page

    The next part of the UI build is to build out this section of the blog posts. This should be done in haste as we organize to get API keys to fetch from dev.to in a dynamic way.

    For now, this is the design for the blog section: blogs

    enhancement good first issue OSCA-Nairobi oss-kenya 
    opened by katungi 11
Owner
She Code Africa Nairobi
We are a community of developers who work on open source projects.
She Code Africa Nairobi
WinBox is a professional HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!

WinBox is a professional HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!

Nextapps GmbH 5.7k Jan 3, 2023
📃 Violet is an open-source discord bot with multiple functions written in TypeScript.

?? About Violet is a JavaScript Discord bot focused on utility and game functions. It have a temporary channels system, minecraft and league of legend

Violet 3 Nov 11, 2022
Race TV Multiplayer is an open source F1TV desktop client for Windows with support for multi-monitor setups

Race TV Multiplayer Race TV Multiplayer is an open source F1TV desktop client for Windows with support for multi-monitor setups. This app is unofficia

Wessel Kroos 9 Jul 27, 2022
Open source forensic software to analyze and present digital evidence.

Go Forensics Website Open source forensic software to analyze and present digital evidence. This is the website for Go Forensics Installation Yarn is

Mooij Technologies 3 Apr 29, 2022
Boilerplate starter template for a new Telegram Web App (TWA) interacting with the TON blockchain

TON Starter Template - Telegram Web App (TWA) Starter template for a new TWA interacting with the TON blockchain Overview This project is part of a se

TON @ DeFi.org 11 Dec 17, 2022
I built this website for my personal wedding website.

amifauzi.com I built this website for my personal wedding website amifauzi.com. Available features: Welcome modal connected to Google Sheet Hero secti

Fauzi Al Aziz 11 Dec 15, 2022
Re-developed the Sky Ice Cream website using ReactJS. Redesigned the UI to a much more appealing and intuitive styling.

This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: npm start Runs the app in the developmen

Aakash Jana 1 Dec 27, 2021
🌲The perfect personal website template.

Conifer ?? Conifer is an easy to use, fun and rewarding template to help you build your own personal website. It is 100% free to use- and aimed at tho

Toby 7 Nov 27, 2022
The website for ddocs.io

DDocs Frontend This is a Next.js project bootstrapped with create-next-app. Getting Started cp .env.example .env Fill out any environment variables in

ddocs.io 16 Dec 11, 2022
The mogami.io website

Website This website is built using Docusaurus 2, a modern static website generator. Installation $ yarn Local Development $ yarn start This command

null 6 Nov 4, 2022
Microsoft Club - Sathyabama Institute of Science and Technology's Website

Microsoft Club - Sathyabama Institute of Science and Technology's Website This repository contains the source code for the current deployment of our w

Microsoft Club - Sathyabama IST 6 Jul 25, 2022
Public website of NextCitizens.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

NextCitizens 4 Jul 19, 2022
Our official website - currently at https://haidevs.alawonn.com

The Haitian Developers community website - currently at https://haidevs.alawonn.com Getting Started First, run the development server: yarn dev Open h

Haitian Developers (HaiDevs) 2 Sep 9, 2022
Website for Streamarr.

Qwik App ⚡️ Qwik Docs Discord Qwik Github @QwikDev Vite Partytown Mitosis Builder.io Project Structure Inside of you project, you'll see the following

Streamarr 2 Oct 10, 2022
Neofest website!

NeoFest The frontend website for NeoFest. What is NeoFest? Navrachana University, Vadodara is organizing a technical event “NEOFEST” in accordance wit

null 4 Nov 8, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Shikhar 4 Oct 9, 2022