spaceyatech / syt-web-redesign Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://www.spaceyatech.com/
License: Apache License 2.0
Home Page: https://www.spaceyatech.com/
License: Apache License 2.0
The Join SpaceYaTech
button has a pop-up form that doesn't give any feedback once it's submitted.
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 ๐ ):
As mentioned in #116, the blog's "Like ๐" functionality needs improvement.
Currently, the usePostLikeBlog
function (hooks/Queries/blog/usePostLikeBlog
) currently uses axios
only to make a POST
request. Here's what you should change:
usePostLikeBlog
function should be moved to hooks/Mutations/blog/usePostLikeBlog
since it's a mutation and not a queryaxios
, use a privateAxioswith
@tanstack/react-query(reference:
hooks/Mutations/shop/useMakeOrder`)I am new to open source and this project in particular. I would like to improve on the following states of your application
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".
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.
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.
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.
FeaturedCarousel
component instead of @material-tailwind/react
.@material-tailwind/react
dependency.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.
admin
folder
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.
yup
and @hookform/resolvers
with react-hook-form
and custom validation.yup
and @hookform/resolvers
dependencies.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).
react-lazy-load-image-component
. 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.
Home page
About Us Page
Community Page
All Events Page
Single Event 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:
The Terms&Conditions footer link is currently displaying a pdf.
docs
folder.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.
assets/images/about
folder for the About page assetsuseLocation
hook.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:
react-helmet
to add dynamic title tags and metadata to the site.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
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.
# Removing dummy data from the ```/admin/events``` route
Originally posted by @spaceyatech-org in #82 (comment)
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
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:
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
React.lazy
for imports, e.g:const LandingPage = React.lazy(() => import('./LandingPage'));
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 ๐ ):
The pages below are to be added under pages/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. ๐
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:
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.
react-icons
fontawesome
icon with a similar icon from react-icons
react-icons
if possible@fortawesome/fontawesome-svg-core
, @fortawesome/free-solid-svg-icons
and @fortawesome/react-fontawesome
dependenciesDesign 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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.