Giter VIP home page Giter VIP logo

5hraddha / national-youth-bike-council Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 1.0 18.1 MB

A multi view React web app with Strapi as CMS, for National Youth Bike Council whose aim is to to provide an active learning space for young cyclists to boost youth voice in the bicycle industry through peer leadership

Home Page: https://www.nybcouncil.com/

HTML 0.72% JavaScript 98.71% CSS 0.55% Shell 0.02%
html react react-routerv6 tailwindcss framer-motion html-css-javascript strapi strapi-cms bike national-youth-bike-council cms headless javascript

national-youth-bike-council's Introduction

awesome container company logo

react javascript tailwind css framer motion strapi postgres

About the Project

National Youth Bike Council aims to provide an active learning space for young cyclists to boost youth voice in the bicycle industry through peer leadership. The organization already had a multipage website but was looking to set up a new website using a Content Management System (CMS). The ask was to create a simple web design along with flexible & organized interface to manage the content.

Features of the App

  1. Responsive webpage
  2. A single-page web app with multiple views
  3. Subtle animations on page scroll
  4. Custom-designed components for blog posts, dropdowns, and pagination
  5. Content management by integrating the web app with Strapi, to give the flexibility to modify all the data in the web app
  6. Images & videos hosted at Cloudinary for fast delivery via CDN
  7. Fully accessible and SEO optimized web app as per Google Lighthouse Report

Demo

website-screen-recording-mini.mp4

Technologies and Standards Used for Frontend

  1. HTML (Hyper Text Markup Language)
  2. CSS (Cascading Style Sheets)
  3. Tailwind CSS
  4. React.js
  5. Framer Motion for Animation Effects

Technologies and Standards Used for Backend

Strapi an an open source headless CMS that allows for the rapid development of RESTful APIs.

Product Design Specification

You can view the product specification document here

Live Webapp

Visit the live website - here.
Netlify Status

national-youth-bike-council's People

Contributors

5hraddha avatar

Watchers

 avatar

Forkers

stephengeospy

national-youth-bike-council's Issues

Documentation

  • Add the fact that the Github repo (include the link) should always stay public
  • Include a new diagram explaining how the services interact, it does not need to be high-tech, some circles with arrows could work! Just linking the flow of the website together.

Website SEO?

Is it possible to edit website SEO visibility from Strapi?

Image

It may enable our websites to show up with photos where possible and edit search results

Homeroom Allow Non-PDF options

I was editing our website last week and noticed that the Homeroom Page was not working. It was not loading because there was one PDF missing from one of the entries. It looks like PDFs are required for that page. I think that makes sense based on what I originally asked for.

I'm thinking that in the future, we may want to link to additional resources, some we may not have a PDF for, like a partner organization's resource or just a social media link that can serve as a Homeroom resource. Would it be possible to not require a PDF but instead, require only one of the four fields to be filled out?

Image

Testimonials On Partnership & Sponsors pages

Please add the ability to create testimonials for Sponsors and Partners.

Image

An idea for implementing this:

1
Since we already have a sponsorship section... and partner section...
Image

maybe add the "story_in_brief" section to the field details. Then, give us the ability to check a box that says "highlight sponsor" or "highlight partner". No more than 3 partners "highlighted" at once on partnership page and same with the sponsor page.

The only issue with this idea is if... we want to have a human's face instead of the logo for the testimonial but not affect the main logo on the page it may not work. So it may be worth adding an additional photo upload button for all partners and sponsors. That new upload will be mandatory when the "highlight partner" or "highlight sponsor" is checked and can access another photo that will only show up in the testimonial.

Add Link to Youth Bike Summit website in footer (HOLD)

We'll probably need to talk more about this together but we are going to be expanding our resources section which means that we'll either need a separate resource page or an extended comprehensible version on the current page we have now. I imagine our resources will expand a lot - so a separate page sounds about right. We'll store links to youtube videos and also store PDFs as well, for people to access - just like the annual reports and break out our resources into sections for readability.

Seeing Website Analytics

I have not yet looked but am hoping to find a way to see website analytics. We currently use a service called Metricool that enables connecting our site to analytics -- like wise we also can just use a plugin if Strapi has one?

Putting this one as more important than the other two currently available. Let me know how I can best support, if you need to get into metricool to check it out.

Checking if could make the website into a Progressive Web App

Idea by Shraddha:

  • Check if we could gracefully convert the React based website of NYBC to a Progressive Web App (PWA).
  • A progressive web app (PWA) is a website that looks and behaves as if it is a mobile app. PWAs are built to take advantage of native mobile device features, without requiring the end user to visit an app store, make a purchase and download software locally. It's basically making a website to be used from mobile as an app without actually developing a native app.
  • A Progressive Web App: What Is It and 10 Reasons Why You Need It

Ability to change links in Website footer

As simplistic as it sounds, it would be great to be able to change links in the website foot. It would require that things be automatically generated I assume like the rest of the website but that is fine. The Footer has been doing well.

The use case for this is the donation link. I do need to change it, as we are testing a few different donation systems. While making this change, I think it would be nice to enable editing or some way to change the text and link for all About Us, Support, and Social links

Image

e.i. https://secure.givelively.org/donate/national-youth-bike-council

Update Documentation

  • Add the fact that the Github repo (include the link) should always stay public
  • Include a new diagram explaining how the services interact, it does not need to be high-tech, some circles with arrows could work! Just linking the flow of the website together.

A Fun Link Tab

I ran across this webpage recently, something I did not know was possible and it reminds me of our Linktr.ee/nybcouncil. Of course, the goal with a lot of things is to get people to go to our website and for a while, with Wix we used to have a similar page to the first link.

It may be a fun project to use the style you have created for us to create a similar page to increase traffic to our website and also make it easier to show additional content. Of course, being able to edit it all from Strapi is the goal. Linktr.ee offers the ability to link to videos, add small photos, and link to webpages. but each button has only one link and one or no photos -- as a good place to start.

Resources Tab Extended

The objective here was to add a location that we could put council resources or content - Homeroom

Migrate Create React App to Vite in the project

The website was built in React using Create React App (CRA) build tool - one of the most popular tools for bootstrapping React applications. Vite is one such build tool that aims to provide a faster and leaner development experience for modern web projects.

There are many performance benefits of using Vite as a build tool as it also provide a rich development experience:

  1. Faster build times: Vite uses the esbuild bundler, which is much faster than the Webpack used in CRA. It owes its speed to the fact that it is written in Go — a fast, multithreaded language compiled to machine code, unlike Webpack, written using JavaScript, which is interpreted and single-threaded, which in turn makes it slower.
  2. Improved development experience
  3. Better performance: Vite uses a "module-based" approach to code splitting, which means it only loads the modules that are needed for a given page or component, resulting in faster load times and better overall performance. This is in contrast to CRA's approach, which uses a "route-based" approach to code splitting, which can lead to larger and slower-loading bundles.
  4. CRA is no longer being recommended by the React team

Reference

Homeroom and Council Blogs Filtering Method

Implement a feature to be able to sort blogs and homeroom content by year or by the first letter of any of the hashtags included on the post. This may require adding hashtag option to homeroom.

Current:

Image

Enable Connect Youth Groups

The URL will be /partners

For now there will be two Partner Types: Community Tier & Advocate Tier.

It would be great if we displayed all the tier in a "Listed format". Where the content is displayed like below. You'll see at the top there is a tab to see either the Community Tier benefits or the Advocate Tier benefits.

Image

When the page loads it should default to the Advocate tier benefits.

When a specific tab is clicked, the logos with that groups should be dynamically displayed on the page underneath.

Image

Above the tabs there should be a button that says "Sign Up To Become A Partner"

Image

Below the logos there should be a section for 2 testimonials of current Partners (you can make these up using Latin, I'll fill them in later). Under that, there should be a space where if I want to put more words / context, I can and then, once again to have the sign up to become a Partner button.

For the Advocate and Community Tier, you can put in Latin text for now and I'll come and put the bullet listed content. For the Advocacy tier, would it be possible to put a button at the bottom that when clicked, this embedded text pops up or pulls down? If the words on that button and all the buttons could be swappable, that would be great.

<!-- Begin Give Lively Fundraising Widget -->
<script>gl=document.createElement('script');gl.src='https://secure.givelively.org/widgets/branded_donation/national-youth-bike-council/become-a-partner.js';document.getElementsByTagName('head')[0].appendChild(gl);</script><div data-widget-src='https://secure.givelively.org/donate/national-youth-bike-council/become-a-partner?ref=sd_widget' id="give-lively-widget" class="gl-branded-donation-widget"></div>
<!-- End Give Lively Fundraising Widget -->

Any Partner listed under https://www.nybcouncil.com/sponsorships can be moved to /partners

We should have the ability to input content in the Orange box

We should have the ability to set a default tab.

We should have the ability to rename the tabs.

We should have the ability to create a new tab.

I believe I gave you that map where our partners are located. . . In this design above I am thinking it could go between the logos and the testimonials? I'm open to suggestions!

This is the link to the sign up Google form: https://forms.gle/qGpibK8YL3DDchHM8

iPhone PWA & Mobile Website Bug

on the Where Are We page on mobile and on the PWA (for iPhone only) the image does not display. A small bug that was noticed

Image

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.