Depends On

• Pillar Component #79

What feature are you adding?

Mission Pillar Section

Describe your issue

Requirements

• Create a component named MissionPillars in the components folder that implements the screenshots below.
• It should make use of the existing Pillar component.
• Obtain the images from the Figma design. Use THIS VIDEO as a guide
• The images should use the Next Image component.
• Include the component in index.page.tsx

SCREENSHOTS

Desktop

Mobile

Figma Design

Acceptance Criteria

• The implementation should match the design - text content, typography, capitalization and spacing.
• The UI should be responsive and work well on both desktop and mobile viewports.

What feature are you adding?

Creating the landing page

Description

Create the landing page section. This includes the title and the three card components.

Design Link

Design

Depends on

• Button Component #85

What feature are you adding?

Contact Us Section (Form UI)

Describe your issue

Requirements

• Create a component named ContactUs in the components folder that implements the screenshots below.
• It should render a section tag with an id of contact-us.
• Include the component in index.page.tsx
• The form should not have any logic, this ticket is only concerned with the presentation.
• Reuse the Button component.
• The form should be accessible with proper labels linked to the inputs.
• Both the name, email and message fields should have the required attribute.

SCREENSHOT

Desktop

Mobile

Figma Design

Acceptance Criteria

• The implementation should match the design - text content, typography, capitalization and spacing.
• The UI should be responsive and work well on both desktop and mobile viewports.
• Both the name, email and message fields have the required attribute.
• Inputs have accessible labels.

What feature are you adding?

I have added the fonts and the colors that are referenced in the design file

Describe your issue

This should create some level of uniformity in the field and make adjustments needed easy and fast.

What feature are you adding?

Adding Tests

Describe your issue

Add tests to all the components

Description

Add docker for containerization, to enable the continued development of the reactdevske-website, regardless of dependencies and dev dependencies package updates, and also enable easier collaboration with other contributors

Solution description

No response

Additional information

No response

Problem description
I'm kind of lost when I open the website and can't get a general overview on this beautiful react community

Solution description
I suggest creating a well-designed nav menu with a link to an About page that describes what the community is about . Perhaps more relevant links can be added to the nav menu as we go along.

What feature are you adding?

Convert Codebase to Next.Js

Describe your issue

The current codebase is written in CRA(Create-react-app) and we want you to convert it to Create Next App

Checkout the nextjs Documentation HERE for more information on this

What feature are you adding?

Add custom animation to the React Developer Community Kenya Logo

Describe your issue

The current logo animation is of an image rotating which feels unnatural.

With my background in motion graphics and animation, I've customized the animation like shown below. I feel this is a more interesting approach to the animation.

On the site, the animation is rendered using data from a json file and it takes up 110kbs.

What feature are you adding?

Update the Issue-template

Describe your issue

Added Bug and Other to the Issue template folder.
Updated the file feature.

What feature are you adding?

Containerize reactdevske-website with Docker

Describe your issue

Want to add Docker/Containerization flow on reactdevske-website

Description

Just a suggestion:
the current Coming Soon Page has some blank space
Its easy to display repo contributors using GITHUB API

not only an honor of recognition but also its motivating 😄

Solution description

create a get request end point to git Api returning a json array list of this project contributors and display them on the page

Additional information

this endpoint may be modified later to showcase Community projects on the website , Members list , contributors and their git accounts and their projects on the site if needed

Description

This is for new contributors to much more easily find the link. I experienced this issue myself when I had to post a question on the forums for someone to reply with the link which is a collaboration barrier that most people would rather avoid.

Solution description

It's simple ill just add the link to the readme.

Additional information

You can assign me

What feature are you adding?

Events Section

Describe your issue

Requirements

• Create a component named Events in the components folder that implements the screenshots below.
• It should render a section tag with an id of events.
• It should make use of the existing DisplayRC component - feel free to adjust the DisplayRC component to match the requirements in this ticket.
• Use the events.json data shown below.
• Obtain the images from the Figma design. Use THIS VIDEO as a guide
• The images should use the Next Image component.
• Include the component in index.page.tsx
• Create a new test file in the e2e folder named events.spec.ts and add a test that verifies that clicking the "See More" link in the component navigates to the correct URL HERE.

events.json

{
  "events": [
    {
      "id": 1,
      "title": "Physical Meetups",
      "description": "Physical meetups where we share, learn and network.",
      "image_url": "https://photos.google.com/share/AF1QipMYzi5M1zTfsp9BYW6Rb1uF7_5gC3PrbTwS-xJuwVMYd9LUFXFUJbDW4-tap8SFEw/photo/AF1QipNcrZfA-7tCsE0x6kU9isgBsDgwq633uuDUGZXW?key=bkVyajFIM3BsdWtpdUY2UEVVTXhDOXZVckZtZlFR",
      "target": "https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events"
    },
    {
      "id": 2,
      "title": "Weekly Online Standups",
      "description": "Weekly open calls in the community’s Telegram group discussing industry-related topics.",
      "image_url": "https://images.unsplash.com/photo-1619490287893-862fd1808407?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80",
      "target": "https://bit.ly/joinreactdevske"
    },
    {
      "id": 3,
      "title": "Community Power Sessions",
      "description": "Community members meet and share technical concepts with other members of the community.",
      "image_url": "https://drive.google.com/file/d/1k23Ey4zXg45XoAxrcQ1k24YBkJXBI-vQ/view?usp=sharing",
      "target": "https://www.youtube.com/channel/UC9_eVcPBk4T-DcZLHpQfy4w/videos"
    },
    {
      "id": 4,
      "title": "Joint Meetups",
      "description": "Meetups hosted in collaboration with other tech communities.",
      "image_url": "https://photos.google.com/u/3/search/_tra_/photo/AF1QipOh6FM771-Q4oga0ge8kVoKsK2fEok3pE1eBjfk",
      "target": "https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events"
    },
    {
      "id": 5,
      "title": "Monthly Online Standups",
      "description": "Monthly open calls on Google Meet  bringing together people from different communities.",
      "image_url": "https://photos.google.com/share/AF1QipMYzi5M1zTfsp9BYW6Rb1uF7_5gC3PrbTwS-xJuwVMYd9LUFXFUJbDW4-tap8SFEw/photo/AF1QipNcrZfA-7tCsE0x6kU9isgBsDgwq633uuDUGZXW?key=bkVyajFIM3BsdWtpdUY2UEVVTXhDOXZVckZtZlFR",
      "target": "https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events"
    },
    {
      "id": 6,
      "title": "Community Challenges",
      "description": "We organize open source challenges to keep the community engaged.",
      "image_url": "https://photos.google.com/share/AF1QipMYzi5M1zTfsp9BYW6Rb1uF7_5gC3PrbTwS-xJuwVMYd9LUFXFUJbDW4-tap8SFEw/photo/AF1QipNcrZfA-7tCsE0x6kU9isgBsDgwq633uuDUGZXW?key=bkVyajFIM3BsdWtpdUY2UEVVTXhDOXZVckZtZlFR",
      "target": "https://github.com/reactdeveloperske/community-coding-challenges"
    }
  ]
}

SCREENSHOT

Figma Design

Acceptance Criteria

• When the "See More" link is clicked, the page opens TODO: in a new tab.
• The implementation should match the design - text content, typography, capitalization and spacing.
• The UI should be responsive and work well on both desktop and mobile viewports.
• The events.spec.ts test should pass on both Chrome, Firefox and Safari.

What feature are you adding?

Colors and the shading

Describe your issue

It is important to have colours pre-set in the tailwind.config.js file. This enables the users in the future easily update colors and changes easy, just by making changes to that single file.

Take a look at the designs HERE have that been implemented.

What feature are you adding?

Creating the navigation bar

Description

Create a navigation bar with the following navigation links as per the design.

• About us
• Members
• Events
• News
• Forum
• Contact
• Join Community

Design link

Design

Description

Adding animation to the page to make it more engaging

Solution description

Install and use react-reveal on the page.

Additional information

No response

What feature are you adding?

adding dark mode and a toggle switch to enable/disable it

Describe your issue

Adding a dark mode feature for viewers who prefer dark mode.

What feature are you adding?

Button Component

Describe your issue

Requirements

• Button
  • Create a component named Button in the components folder that implements the screenshots below.
  • It should use the native HTML button element.
  • It should accept all HTML button props.
• Link
  • Create a component named LinkButton in the components folder that implements the screenshots below.
  • It should use the native HTML a element.
  • It should accept all HTML a props.
• Both buttons should handle long labels by hiding the overflow with an ellipsis.
• Both buttons should match the design.

SCREENSHOTS

Figma Design

Acceptance Criteria

• The implementation should match the design - typography and spacing.
• The buttons should be responsive and work well on both desktop and mobile viewports.
• Long labels should be handled correctly.

What feature are you adding?

Pillar Component

Describe your issue

Requirements

• Create a component named Pillar in the components folder that implements the screenshots below.
• It should accept a counter and label as props.
• It should handle long labels by hiding the overflow with an ellipsis.

SCREENSHOTS

Figma Design

Acceptance Criteria

• The implementation should match the design - typography and spacing.
• The UI should be responsive and work well on both desktop and mobile viewports.
• Long labels should be handled correctly.

Description

Its minor but can be confusing to someone getting started
on CONTRIBUTING.md the commands are
yarn
instead of
yarn install

on running app in development mode:
its
yarn start
instead of
yarn run dev
or
npm run dev

Screenshots

Additional information

suggested:

improve the how to contribute to be beginner friendly

What feature are you adding?

making the navbar component sticky

Describe your issue

Description
I experienced an issue where upon trying to scroll down I was unable to access the navbar.
Having it reachable when scrolling would enable ease in navigating, especially if we plan to add more pages in future.

Solution description
Make the navbar stick to the top when scrolling.

Additional information
Here is a short demo of what it would look like. Not the final thing however, only for demo purposes.
Among the changes I would suggest is:

• Retaining the initial clear background
• Fading into a white background and black coloured text when the user starts scrolling
• Transition back into the clear background once the user scrolls back to the the top

You can add any more recommendations you see fit.

Description

A page where it would feature various posts from medium related to react, next js and typescript

Solution description

Design of a page that has the blogposts, and integration of medium nom component that pulls medium articles as embeds

Additional information

No response

Is your feature request related to a problem? Please describe.
There seems to be an error page not found when trying to navigate to the various pages on the project

Description

Style the cards and add animation to card::hover and seemore button.

Solution description

No response

Additional information

No response

What feature are you adding?

Fonts and Typography

Describe your issue

We need to add the fonts to the page as they have been described in the design file.
You will need to add the fonts, we recommend google fonts.

refer to the design here

What feature are you adding?

adding git hooks with husky

Describe your issue

We can use Husky to lint commit messages, run tests, and lint code when you commit or push code. We can specify commit message formats, add pre-commit and post-merge hooks

Depends on

• Logo Component #84

What feature are you adding?

Footer Section

Describe your issue

Requirements

• Create a component named Footer in the components folder that implements the screenshots below.
• The menu items are anchor links which should smoothly scroll to the relevant section when clicked.
• The sections do not need to exist for this ticket, only ensure that the links are correct.
• Reuse the Logo component.
• Include the component in index.page.tsx.
• Create a new test file in the e2e folder named footer.spec.ts and add a test that verifies that clicking each of the 3 links in the component navigates to the correct URLs.

SCREENSHOTS

Desktop

Mobile

Figma Design

Acceptance Criteria

• When the "About Us" menu is clicked, the URL changes to /#about-us.
• When the "Events" menu is clicked, the URL changes to /#events.
• When the "Contact" menu is clicked, the URL changes to /#contact-us.
• The implementation should match the design - text content, typography, capitalization and spacing.
• The UI should be responsive and work well on both desktop and mobile viewports.
• The footer.spec.ts test should pass on both Chrome, Firefox and Safari.

What feature are you adding?

Add indepth documentation of this project

Describe your issue

I am looking to contribute a good documentation practice here:

• THE README.md file: Make it informative, make it brief, make it incentive enough for them to keep on digging through all the other docs in your documentation, as well.

• THE REFERENCE FILE: all the functions in your software and how they work
  what inputs and outputs its users should expect
  … and side effects, too
  your project's main goal(s)

• THE GUIDE FILE : A tutorial-like document that “takes the user by the hand” and loops through all the features of your software.

Description

Add some changes to the project's contribution guidelines based on the new developments on the project and finish up on the remaining CDN images on issue #118

Solution description

Submit a pull request with changes that solve these issues.

Additional information

No response

What feature are you adding?

Refactoring project folder structure

Describe your issue

Refactor the project folder structure based on THIS DISCUSSION and the resulting poll

What feature are you adding?

Add pages/routes

Description

Add the following pages/routes in the pages folder.
Members
Events
News
Forum
Contact

What feature are you adding?

About Section

Describe your issue

Requirements

• Create a component named AboutUs in the components folder that implements the screenshots below.
• It should render a section tag with an id of about-us.
• Include the component in index.page.tsx

SCREENSHOT

Desktop

Mobile

Figma Design

Acceptance Criteria

• The implementation should match the design - text content, typography, capitalization and spacing.
• The UI should be responsive and work well on both desktop and mobile viewports.

Description

Currently the images are being served locally which hinders on the performance of the website.

A proposed solution would be to serve the images from a CDN

Screenshots

No response

Additional information

Here are the links to add from the CDN:

https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/physical_meetup_fqkitv.jpg

https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/weekly_standups_lg3rth.jpg @isaack-mungui

https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532589/website-images/community_sessions_xsyd8d.jpg @remigathoni

https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/hero-image_dqpm0k.jpg @gitahievans

https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/no-image_nnaxwk.jpg @EstherWMaina

https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/mentorship-image_tz0mor.jpg

https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/learning-image_eylqwm.jpg @adamswonder

https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/community-image_pkeqwj.jpg @JamesMGithire

NOTE: Kindly just pick one image to implement and remember to follow our contribution guidelines before you commit a pull request

For the recaptcha key use this:
6LenksIiAAAAACrW2PQc1bWg_Kqj1HKh40q4tsjG

Acceptance Criteria

• The images are loading correctly.

What feature are you adding?

Install and configure Tailwind CSS

Description

Install and configure Tailwind CSS.
Here is a link to the documentation with a guide on setting up Tailwind in a Next JS application.

Wouldn't it be nice if someone could as well access community social media channels(discord, telegram etc...)? from the project README file

What feature are you adding?

Creating the About Us section

Description

Create About Us section.

Design link

Design

What feature are you adding?

Event page component

Describe your issue

Create a reusable component that will be used to show different events that the community will showcase.

The component should appear like the screenshot above and be able to be re-sized depending on the use i.e either mobile, tablet or desktop.

Description

The content of the mission section appears to be floating on the left. Would be nice to have the content centered to be consistent with the rest of the page.

Screenshots

Additional information

No response

Description

The font-size utility for Tailwind CSS has pre-defined values. My suggestion is to set custom ones at the config file, as per the ones described in the design file. That will help everyone to be on the same page when font sizes are concerned.

This can generally apply to the project's theme.

Screenshots

Additional information

No response

Depends on

• Logo Component #84
• Button Component #85

What feature are you adding?

Hero Header Section

Describe your issue

Requirements

• Create a component named HeroHeader in the components folder that implements the screenshots below.
• It should make use of the existing Navbar component - feel free to adjust the Navbar component to match the requirements in this ticket.
• The menu items are anchor links which should smoothly scroll to the relevant section when clicked.
• The sections do not need to exist for this ticket, only ensure that the links are correct.
• Reuse the Logo and Button components.
• Obtain the hero image from the Figma design. Use THIS VIDEO as a guide
• Include the component in index.page.tsx.
• Create a new test file in the e2e folder named hero-header.spec.ts and add a test that verifies that clicking each of the 5 links in the component navigates to the correct URLs.

SCREENSHOT

Desktop

Mobile

Figma Design

Acceptance Criteria

• When the "About Us" menu is clicked, the URL changes to /#about-us.
• When the "Events" menu is clicked, the URL changes to /#events.
• When the "Contact" menu is clicked, the URL changes to /#contact-us.
• When the "Join Community" button is clicked, the page opens https://bit.ly/joinreactdevske in a new tab.
• When the "Join ReactDevsKE" button is clicked, the page opens https://bit.ly/joinreactdevske in a new tab.
• The implementation should match the design - text content, typography, capitalization and spacing.
• The UI should be responsive and work well on both desktop and mobile viewports.
• The hero-header.spec.ts test should pass on both Chrome, Firefox and Safari.

Description

I would like to suggest a folder structure that is easy to comprehend and hierarchical.

Solution description

Project files should be placed in categorized folders based on what they do.

Additional information

No response

Description

There is currently no way for a beginner to know how to go about adding the changes they make to the repo. An improvement would be to add this instruction to the guidelines.

Solution description

No response

Additional information

No response

Description

This is in relation to this failing action caused by #93 from @EspiraMarvin

Going through the logs this is not caused as a result of webkit timeout due to waiting for scrolling event, the scrolling event succeeds. what is timing out is the locator.click event

Digging into it and running the tests locally in debug mode I found out the discrepancy.
This part of the log: selector resolved to hidden <a target="_blank" href="[https://kommunity.com/reac…](https://kommunity.com/reac%E2%80%A6)>See More</a>

Not sure why webkit is marking it as hidden. This doesn't happen on local either so hard to catch it
Playwright will throw a TimeoutError when element is not visible. More here

Screenshots

No response

Additional information

No response

What feature are you adding?

Adding an Under Construction Banner at the top of the page

Describe your issue

When coming to the page for the first time in its current form, you will be met by a super basic page. Wanted a way to show new visitors that the page is currently under construction with a construction banner component at the top of the page.

example image

Here is also a nice article from css-tricks incase you want to take up the issue
CSS-TRICKS ARTICLE on the diagonal colored stripes category.

What feature are you adding?

Logo Component

Describe your issue

Requirements

• Create a component named Logo in the components folder that implements the screenshots below.
• It should accept a size as prop for the different sizes on the header and footer.
• The logo should rotate similar to how it does in a fresh create react app installation as shown on this GIF.
• Obtain the logo from the Figma design. Use THIS VIDEO as a guide

SCREENSHOTS

Figma Design

Acceptance Criteria

• The implementation should match the design.

What feature are you adding?

Migrating the codebase to TypeScript

Describe your issue

As was the plan during the open source challenge, we intended to migrate the codebase to TypeScript after the challenge.