spaceyatech/syt-web-redesign

Welcome to SpaceYaTech Website Redesign!

---

Welcome to the SpaceYaTech website redesign project! This Readme provides comprehensive information about the project, including project description, project structure, communication channels, roadmap, license information, acknowledgments, and links to other important files.

---

Table of Contents

• Project Description
• Project Set Up
• Project Structure
• Communication Channels
• Roadmap
• License Information
• Acknowledgments
• Links to Other Important Files

Project Description

The SpaceYaTech website is being redesigned to enhance its user experience and visual appeal.

The new website will be built using the following tech stack:

• React: JavaScript library for building user interfaces.
• Vite: build tool that aims to provide a faster and leaner development experience for modern web projects.
• Tailwind CSS: utility-first CSS framework for rapidly building custom user interfaces.
• GitHub: platform for version control and collaboration.
• Figma: web-based vector graphics editor and prototyping tool.

Figma Design Reference: Figma Design

Project Set Up

Follow these steps to get the project up and running on your local machine:

1. Clone the repository

   Open your terminal and run the following command:

   git clone https://github.com/SpaceyaTech/SYT-Web-Redesign.git

2. Navigate into the directory

   Change your current directory to the project's directory:

   cd SYT-Web-Redesign

3. Install the dependencies

   Run the following command:

   npm install

4. Start the development server

   Now you can start the development server and begin developing:

   npm run dev

   The project should now be running at http://localhost:5173 (or another port if 5173 is already in use).

Project Structure

The project follows a standard directory structure:

.
├── docs
│   ├── CONTRIBUTING.md
│   ├── CODE_OF_CONDUCT.md
├── public
├── src
│   ├── api
│   ├── APP
│   │   ├── components 
│   │   ├── pages 
│   │   ├── index.js
│   ├── assets
│   │   ├── images
│   ├── context
│   ├── hooks
│   │   ├── Mutations 
│   │   ├── Queries 
│   │   ├── useAuth.jsx 
│   ├── router
│   ├── utilities
│   └── ...
├── main.jsx
├── index.css
├── README.md
└── ...

• The public directory contains static assets like images, icons, etc.
• The src directory contains the main source code of the project, including components, pages, styles, and other related files.

Communication Channels

For effective collaboration and communication, we recommend the following channels:

• Discord Sever: Join the SpaceYaTech community on Discord.

• Rocket.Chat: Join the SpaceYaTech on Rocket.Chat platform. Share your Rocket.Chat username with the project maintainers to get an invitation.

• GitHub Discussions: Use GitHub Discussions for general discussions, feature requests, and questions related to the project.

• GitHub Issues: Use GitHub Issues to report bugs, track feature requests, and discuss specific issues related to the project.

Roadmap

The following roadmap outlines the planned milestones and features for the website redesign project:

1. Design planning and collaboration
2. Initial implementation of core pages
3. Integration of design assets
4. Styling and responsiveness
5. Content population and review
6. Performance optimization and testing
7. Final bug fixes and refinements

Please refer to the Roadmap page for more details.

License Information

The SpaceYaTech website redesign project is licensed under the Apache License. For more details, please refer to the LICENSE file.

Contributing

Please see our Contributing Guidelines for detailed information on how to contribute to the project.

Code of Conduct

We follow the . Please review it to understand our community standards and expected behavior.

Tech Stacks Used for Development:

Thank you for your interest and contributions to the SpaceYaTech website redesign project. Together, we can create an outstanding website experience!

Contributors

syt-web-redesign's Issues

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

Chore: Lazy Load all images on the website

Description

• We want all images to be lazy loaded using react-lazy-load-image-component.

Tasks

• Search for every instance of <img/> in the codebase and replace it with:

  import { LazyLoadImage } from 'react-lazy-load-image-component';
  
    <LazyLoadImage
      alt="..."
      effect="blur"
      src="..." />

• Ensure that all images have a valid alt attribute value.

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

FAQ Section

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.

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

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.

Event Management

Enforce Login on Admin Pages

Admin Pages Auth intergration

https://spaceyatech.com/admin/events/add-event

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).

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:

Products Page

• Hero Section
• Product Card
• Product Grid Section

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

Link the Terms & Conditions Footer link to notion page

Description

The Terms&Conditions footer link is currently displaying a pdf.

Tasks

• Replace the current link with the SYT Notion page link.
• Delete the Terms&Conditions pdf in the docs folder.

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

Removing dummy data from the ```/admin/events``` route

          # Removing dummy data from the ```/admin/events``` route

Originally posted by @spaceyatech-org in #82 (comment)

SEO: Incorporate Metadata with `react-helmet`

Description

We're improving the SEO performance of the website. Site metadata provides extra webpage info to search engines.

You could do some further reading here:

• How to Make React Apps SEO-Friendly – A Handbook for Beginners
• React SEO: A Guide to Building SEO-Friendly React Web Apps

Tasks

• Use react-helmet to add dynamic title tags and metadata to the site.

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.

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.

Incomplete user flow for the Join Community Form

Description

The Join SpaceYaTech button has a pop-up form that doesn't give any feedback once it's submitted.

Tasks

• After user submits the form, they should be shown/redirected to SYT Discord invite.

Tab logo

Change the logo displayed on the tab from that of Vite to SYT logo

Resources Page

• Hero Section
• Resource Card Component
• Resource Grid Section

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:

• How to Make React Apps SEO-Friendly – A Handbook for Beginners
• React SEO: A Guide to Building SEO-Friendly React Web Apps

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'));

Testimonial Section

Navigate to the top of a page on navigation

Description

• Some links navigate to the bottom of the page when clicked. We want it to scroll to the top instead.

Tasks

• Suggested fixes from StackOverflow using useLocation hook.

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.

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`)

About Us Page

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

Admin Pages

• Blog Management
• Chapter Management
• #57
• Resource Management
• #88
• #87

Core Website Pages

• #7
• #1
• #8
• #9
• #55
• #10

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:

Mobile view:

Rectify text alignment:

Events pages

• Events listing
• Single event

CTA Section

🚀 Feat: Implement Shop Admin Pages

Description

• Use this Figma Design to implement Shop Admin Pages.

Tasks

• The pages below are to be added under pages/admin/shop directory:

  • Dashboard
  • Orders Report
  • Sales Report
    • Sales & Order Statement Components (components/admin/shop directory)
  • Inventory Report
  • Single Sales Item
    • Edit Item and Add Item Components (components/admin/shop directory)

• In the router/index.jsx file, add the shop routes:

// /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. 😁

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

Global Components

• NavBar Desktop
• SideBar Mobile
• Footer

Broken Pages

Remove broken blog pages from the live site

https://spaceyatech.com/blogs

Removing links that are not yet ready

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

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: 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:

Mobile view:

Landing Page

• #19
• #18
• #17

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.

Mobile view:

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

🚀 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