Git Product home page Git Product logo

syt-web-redesign's People

Contributors

abogejr avatar alvyynm avatar andrew-ochieng avatar ase020 avatar bridgitkanini avatar codedveli avatar collinskasyoki avatar daveclinton avatar davidkrupa avatar dennohkim avatar devhumblechris avatar evansroy avatar hamisirizwan avatar jimmyoty avatar jimmytron avatar jumalaw98 avatar moindiosoro avatar rioba-ian avatar sonylomo avatar spaceyatech-org avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

syt-web-redesign's Issues

UI Fix: Home page

The Home page has some inconsistency with the Figma design.

โญ๏ธ The goal is to implement a UI that's as close to the Figma designs as possible for both mobile and desktop layouts.

These are some examples (feel free to rectify fixes that haven't been highlighted ๐Ÿ‘‡ ):

Desktop view:
Image

Mobile view:
Image

๐Ÿš€ API integration for Shop Pages

Description

  • Add API integration to shop pages

Tasks

  • Use API Admin panel to add dummy data for testing
  • Remove the necessity for users to login before they make an order

Fix: Blog Post "Like ๐Ÿ‘" functionality

Description

As mentioned in #116, the blog's "Like ๐Ÿ‘" functionality needs improvement.

Tasks

  • When the user clicks the Like button, they should get a pop-up modal prompting them to register/login first.
  • If the user chooses to login/register, then allow them to mutate the Like count only once.

Currently, the usePostLikeBlog function (hooks/Queries/blog/usePostLikeBlog) currently uses axios only to make a POST request. Here's what you should change:

  • The usePostLikeBlog function should be moved to hooks/Mutations/blog/usePostLikeBlog since it's a mutation and not a query
  • Instead of using axios, use a privateAxioswith@tanstack/react-query(reference:hooks/Mutations/shop/useMakeOrder`)

Breaking `Community page` few seconds after loading. Dark/white theme toggle. Changing the state of the like button on blogs page

I am new to open source and this project in particular. I would like to improve on the following states of your application

  1. Breaking community page a few seconds after loading. I am having a challenge using navigation bar to access the Community page section. It says "Unexpected Application Error! Invalid time value".

  2. Implement the toggle button on "light" and "dark" theme. Using the inbuilt chrome light/dark theme is making the user miss important updates, the UI is not very user friendly on dark theme.

  3. Was the thumbs up button on blogs page meant to change state as like button? I would recommend its subsequent change in state when i click ๐Ÿ‘ to it.

Replace `@material-tailwind/react` carousel with TailwindCSS styles

Description

In efforts to make the repo lighter, we'll be dropping some redundant package dependencies. @material-tailwind/react has only been used once in the repo to create a carousel(/src/APP/pages/events/sections/FeaturedCarousel.jsx). Therefore, we'd rather use the existing UI Library.

Tasks

  • Use Tailwind classes to implement the FeaturedCarousel component instead of @material-tailwind/react.
  • Uninstall @material-tailwind/react dependency.

Delete duplicate/unused folders and files

Description

In efforts to make the repo lighter, we'll be dropping some redundant folders and files e.g src/APP/pages/blog2 is the new and improved version of src/APP/pages/blog. Therefore, src/APP/pages/blog is to be deleted and src/APP/pages/blog2 renamed to src/APP/pages/blog.

You can confirm if a file/folder is unused if it doesn't appear in the routes file.

Tasks

  • Look for any duplicate/unused files and folders in the repo, confirm whether they're still in use and delete the unused files/folders.

Note

โš ๏ธ Don't delete the pages in the admin folder

Replace `yup` and `@hookform/resolvers` with `react-hook-form`

Description

In efforts to make the repo lighter, we'll be dropping some redundant package dependencies. yup and @hookform/resolvers could be replaced with react-hook-form and custom validation.

Tasks

  • Replace every functionality implemented using yup and @hookform/resolvers with react-hook-form and custom validation.
  • Uninstall yup and @hookform/resolvers dependencies.

Implement authentication functionality

Description: Set up user authentication for the ecommerce website, allowing users to securely access their accounts using a chosen authentication method. The chosen authentication method can be a combination of email/password authentication and social media login (e.g., Google, Facebook).

MVP: Remove Dummy data

Description

  • Dummy Data used in the MVP should be removed.
  • The โœ… shows what the backend team should work on.

Tasks

Home page

  • Podcast Section Images
  • Testimonial section

About Us Page

  • Creative team photos

Community Page

  • Event Cards โœ…
  • Chapter Cards โœ…

All Events Page

  • Event Cards โœ…

Single Event Page

  • Event Details โœ…

UI fix: Donate Page

The Donate page has some inconsistency with the Figma design.

โญ๏ธ The goal is to implement a UI that's as close to the Figma designs as possible for both mobile and desktop layouts.

These are some examples (feel free to rectify fixes that haven't been highlighted ๐Ÿ‘‡ ):

First, you can start by fixing spelling mistakes. ๐Ÿ™‚

Desktop view:
The column cards are supposed to be 3 instead of 4.
Image

Mobile view:

Image

Delete unused asset images from the repo

Description

In efforts to make the repo lighter, we'll be dropping some redundant files. There are some files in the assets folder that are not being used.

Tasks

  • Delete unused assets
  • Ensure the naming convention for the files is hyphenated and lowercase
  • Categorize the files according to the pages they're used in e.g assets/images/about folder for the About page assets

Resources Page

  • Hero Section
  • Resource Card Component
  • Resource Grid Section

MVP: Navbar fixes

Description

  • The active Navbar links don't turn green when you navigate between pages.
  • For the MVP, we'll only need these pages on the navbar:
    • Home
    • About Us
    • Community

Tasks

  • Display the active navbar link for the current page
  • Add a max-width for large screen displays (about 1920px)
  • Comment out nav links that are not required for the MVP

Add a loading spinner for components with loading states

Description

Any instances of isLoading or isPending should have a <Loader/> component as part of it.

import { Loader } from "../../../../../components";

{isLoading && (
  <div className="flex flex-col items-center justify-center gap-4 py-10">
    <Loader />
    <p className="text-lg font-medium text-primary">Loading event...</p>
  </div>
)}

For reference, check out: src/APP/pages/community/sections/eventsSection/SingleEvents/SingleEvent.jsx

Broken Pages

Remove broken blog pages from the live site

https://spaceyatech.com/blogs

image

Removing links that are not yet ready

image

ESLint configurations

Hi guys! I would like to request the addition of ESLint configurations, Husky, and Lint Staged to the project. These tools will help ensure code quality and enforce consistent coding standards.

MVP: Home Page

  • Implement the new and improved home page design
  • Set a max-width for the welcome hero section (about 1440px) for xl screens.
  • Add correct links to all buttons
  • #74
  • Implement carousel on podcast cards

Example .env file

It would be very good to have a .env.example file in the repo with sample values for all the key env variables used in the repo.
This would be quite useful for anyone starting to contribute and doesn't know of all the env variables present

e.g

REACT_APP_API_BASE_URL='<API URL from backend>'
SERVICE_ID='<Vite service ID from blahblahblah>'

etc

SEO: Add `Suspense` to page components in routes

Description

We're improving the SEO performance of the website. Having a fallback Loader component for every page before it loads helps bump up SEO.

You could do some further reading here:

Tasks

  • Wrap all route component pages with React Suspense with a Loader fallback component of your choice i.e
// src/router/index.jsx
import {Suspense} from 'react';

const router = createBrowserRouter([
  {
    path: "/",
    element: 
     <Suspense fallback={<div>Loading...</div>}>
        <Layout />
     </Suspense>,
    children: [
      {
        path: "/",
        element: 
         <Suspense fallback={<div>Loading...</div>}>
            <LandingPage />
         </Suspense>,,
      },
      {
        path: "/products",
        element: 
         <Suspense fallback={<div>Loading...</div>}>
            <Products />
         </Suspense>,
      },
... rest of code
  • Optional: you could also add lazy loading to Home Page components and compare it's performance without lazy loading. You'd have to use React.lazy for imports, e.g:
const LandingPage = React.lazy(() => import('./LandingPage'));

UI fix: Community Page

The Community page has some inconsistency with the Figma design.

โญ๏ธ The goal is to implement a UI that's as close to the Figma designs as possible for both mobile and desktop layouts.

These are some examples (feel free to rectify fixes that haven't been highlighted ๐Ÿ‘‡ ):

Mobile view:
Image

MVP: Footer link fixes

Description

  • Some links on the footer aren't linked to actual routes.
  • For the MVP, we'll only need these pages on the navbar:
    • Home
    • About Us
    • Community

Tasks

  • Add required routes to the footer links
  • Comment out footer links that are not required for the MVP

๐Ÿš€ Feat: Implement Shop Admin Pages

Description

Tasks

// /router/index.jsx
// ...other code

  {
     path: "/admin",
     element: <AdminLayout />,
     children: [
      {
        path: "/admin/shop",
        element: <ShopDashboard />, // Shop Dashboard page you're building
      },
      {
        path: "/admin/shop/orders-report",
        element: <OrdersReport/>, // Order page you're building
      },
      {
        path: "/admin/shop/sales-report",
        element: <SalesReport/>, // Sales page you're building
      },
      {
        path: "/admin/shop/inventory-report",
        element: <InventoryReport/>, // Inventory page you're building
      },
      {
        path: "/admin/shop/sales-report/:id",
        element: <SingleSalesItem/>, // Singel Sales Item page you're building
      },

// ...other routes
  ]
}

Feel free to name the components and pages as you see fit. ๐Ÿ˜

UI fix: Products Page

The Products page has some inconsistency with the Figma design.

โญ๏ธ The goal is to implement a UI that's as close to the Figma designs as possible for both mobile and desktop layouts.

These are some examples (feel free to rectify fixes that haven't been highlighted ๐Ÿ‘‡ ):

Desktop view:

Image

Mobile view:

Rectify text alignment:
Image

Replace `fontawesome` icons and svg icons with `react-icons`

Description

In efforts to make the repo lighter, we'll be dropping some redundant package dependencies. react-icons has a wider variety of icons compared to the fontawesome version we're using.

Tasks

  • Install react-icons
  • Replace every fontawesome icon with a similar icon from react-icons
  • Replace all icons that were imported as .svg files with similar icons from react-icons if possible
  • Uninstall @fortawesome/fontawesome-svg-core, @fortawesome/free-solid-svg-icons and @fortawesome/react-fontawesome dependencies

Create a simple landing page

Design and implement a visually appealing landing page with relevant content to introduce the website's purpose and features. The design for the landing page has been prepared on Figma, and contributors are advised to review the design before starting implementation. The Figma link will be provided for reference. The landing page should incorporate a modern and user-friendly layout, highlighting key features, benefits, and a call-to-action. The design elements, such as typography, colors, and imagery, should align with the overall branding guidelines of the project. The landing page should be responsive, ensuring a seamless experience across various devices and screen sizes. It's important to pay attention to the visual hierarchy and use appropriate transitions and animations to enhance the overall user experience.

About Us Page

  • Hero Banner 1
  • Hero Banner 2
  • Mission&Vision Section
  • Our Leadership Section
  • Partner CTA Section
  • Creative Team

Tab logo

Change the logo displayed on the tab from that of Vite to SYT logo
Screenshot 2023-08-23 125011

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.