civictechindex / cti-website-frontend Goto Github PK
View Code? Open in Web Editor NEWJoin a worldwide movement to catalog every open source civic tech project.
Home Page: https://civictechindex.org
License: MIT License
Join a worldwide movement to catalog every open source civic tech project.
Home Page: https://civictechindex.org
License: MIT License
Gwen is working on an overview of the design and some color options.
Chali to convert images to figma and link here
Gwen to review the word list and organize images around that
Code the header for our civic-tech-index website.
Chali to cross check github repositories and ensure we have the current search page set up for a user to search projects efficiently.
Questions to be answered:
We need to start testing versions of the site with a color pallet. First we need some color pallets to test with
https://coolors.co/
https://dribbble.com/stories/2018/12/19/choosing-colors-for-web-design-a-practical-ui-color-application-guide
What happens when someone gets to the end of the process, and realizes they don't have rights enough to tag a project they are on? Let's have a positive action Item for them, that moves the process forward.
Figma file - see Tag Generator - no organization - manual tag submission
Wikipage for Civic Tech Index needs to be over hauled.
Code the 'Search' page as designed in figma with responsive design.
Once complete, I will create a new issue for integrating the Github API with the page.
Visual document (image) for project database schema
We need a square logo to use on social media. We have created some and this is the issue where they can be found.
Attach square logos as a comment to this issue.
Create Wiki page and Read Me file for Civic Tech Index
Initialize the project with Docker and push it to the repo.
We need wireframes for developers to build website from
To spin up the front end based on react using Heroku so that QA can be done.
Gwen to work on color palette to match it with website designs by Chali
[Reference] https://coolors.co/
I just noticed in figma that the nav links have more links on hover.
Re-evaluate Post MVP
We want a way to visualize the current & identified potential contributors to the CTI so that we can show what will be possible and where we are.
Gwen to source new inspiration for the about us page graphic. Will work on a few different iterations.
@ExperimentsInHonesty to share Status Board from call with team.
We need to build each part of the website and connect it with the menu (header and footer). This issue is for the donation page
please update your issue weekly before meeting with
We need to set up user testing with HfLA Product Leads or recruit actual Project Leads of Brigades as our first defined persona group for testing.
Test #1: Our purpose is to test the functionality and usability (taks completion) of the Tag Generator feature.
We need to set up user testing with HfLA Product Leads (as a Brigade Leader persona) for tagging their project repos using tag generator.
Test Add Organization.
Test #2: Test Search Organization and Contributors feature.
Objectives (Joyce and Shipra)
Build Tag Generator Prototype (Ken)
Create Test Plan
Methodology
Agree on Tools for Testing and Notes Capture (Maze has analytics display for reporting)
Recruitment for Personas
Test (Need dates)
Synthesis and Recommendation + Team Share Out
Please put resources in Google Drive Folder
CTI Production Site
CTI Tag Generator Test Planning
Usability Testing - Session recordings.
Google sheet -Analysis Table-Usability Test CTI by all the teams.
All new team members need to be added to the roster
Waiting for an onboarding night
We need a list so that we can figure out how to represent visually
We need to tell people when and how to use our logo
We need a list so that we can figure out how to represent visually
List of all orgs that need to be in the index - google doc
Comprehensive spreadsheet of all the orgs and all their links
To list down all possible read-write API endpoints
Chali to design a directory page depicting all the orgs that have contributed to the index
Please build a design system for the UI components used for the website.
Find a free Figma template to reuse.
There is more content that needs to be added to the home page. The page, header, and footer must be made responsive.
Build a team recruitment form.
Link to sample form
role based sample form
Code the 'How To Use' page as designed in figma
Build FAQ screen in React. Use outside libraries as necessary, ideally we would ultimately link the FAQ to a content management system (a database table and an admin screen) or the Google Sheets file mentioned in the resource
https://medium.com/@timmalstead - should have an article on having content update from a Google Sheets file
https://www.figma.com/file/EFoSuj1b9G4aZ7bN8OX8tf/CivicTechIndex---Master-Design-File---3.8.20?node-id=0%3A2 Figma file has FAQ content right now, we should probably host it in an outside Google doc
Understand the GitHub API integration
Testing the GitHub API
Brigade Project Status Index Board
GitHub API Docs
Donation Link - Need to inform user to select our Brigade in instructions
Social media links associated with Hack for LA added in Footer.
Group effort to confirm the copy used on the home page and about page can explain the index to anyone. whether they are familiar with civic tech orgs or not.
Code the footer for the civic-tech-index website.
Provide collateral for the HackforLA website
See project cards on the hackforla.org website for example
Database setup required for the website
We want the github / civic tech index search to be as useful and intuitive as possible.
Best buy search
Amazon
LinkedIn
Google cart
To find and implement the GitHub API for automated tag generation process.
Resources
Work on the content and production for the Video that will appear on the About page
Current Video Deck
Updated deck
OLD slide deck
Figma
User Stories Board
Create a repository for the backend
The Beta version of the tag generator provides a tutorial on how to manually add Topic Tags to your repo that is customized to the repo the person is trying to tag. This allows us to suggest tags based on affiliation and allow the user to define tags based on the topics of their repo.
Wizard
Questions and buttons that only show up after each answer is given
Tutorial
Once the Generate Tags button has been pushed
Is your organization affiliated with an Organization (yes)
Organization
Project Repository URL:
Add these topic tags to your repository:
[a list of the topic tags you added and the ones we know you need (civictechindex, code-for-all possibly, etc.)]
How to add your tags to your project's repository
We recommend having your project's repository open in another browser for ease of convenience.
GET /api/(version)/organizations
Retrieves the list of organizations
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.