Project's Requirements

In the beginning we don't expect much from selected candidates as we will be there to help them learn technologies that we are making use of at Ignitus, but it would be great if you have an background in react.js & a motivation to learn new things and implement some cool stuff as well.

❝ Let’s grow together - share your knowledge, we will share ours! ❞

Technical Requirements 🎯

• Experience with react.js, some knowledge of redux.js & TypeScript will be helpful.

• Experience in writing Html/Css.

• Experience with distributed version-control system e.g - git.

• Experience with server programming e.g - node.js, mongoDB.

• Experience with writing unit tests (Testing framework). e.g - jest.

• Knowledge of full-stack software development.

Just to make sure you are comfortable with our legacy code-base, feel free to pick up some easy tickets.

Tasks & Features.

We have a lot of migration stuff that needs to be work on, here are a list of migration-related tickets.

Migration Tickets

1. Migration to styled components(Emotion). #476

2. Removal of Bootstrap 4 => Pure CSS. #403

3. Pure CSS => Styled components. #476

4. Migration to TypeScript. #477

5. Migration to react-hooks. #395

6. TypeScript support on server. #127

Feature Tickets

1. Career page Implementation. #396

2. Job description page Implementation. #397

3. Job confirmation page Implementation. #398

4. Signup Flow UI for students Implementation. #575

5. Dashboard: Side footer Implementation. #557

6. Writing unit tests. #519

Ideally, Initially you should start with the migration issues in client/server-side architecture, then we you move ahead with feature tickets. In the end we plan to Implement mentioned modules.

Careers, Profile, Opportunities, Messages, Settings, along with the migration to emotion, react-hooks, and Typescript.

Final Thoughts 💭

Don't worry about the complexity of the tasks, we will be there to answer your questions, let's learn and grow together in this journey. we are open to new ideas and suggestions from your end as well and if they make sense, we can change the requirements & scope of the project accordingly and based on your experience you can help us either on the client/server-side.

Best of luck 🍀🧧

Contributing to Ignitus.

We especially welcome contributions from people from groups underrepresented in free and open source software! 🏳️‍🌈.Our community aspires to be a respectful place, before proceeding please read and abide by our Code of Conduct.

How to create a pull request ?

Steps to follow before opening a pull request.

• Please follow the template to create a pull request.

• Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged. (Check this for more info)

• Create a new branch for the ticket you are willing to work on, rather than working directly on master.

• Rebase your work onto the latest version from master and resolve any merge conflicts.

• Check that only the relevant files are being changed, there should be no unintended changes to the schema or dependency files. 📄

• If you have added any external libraries through a package manager, ensure that you have updated the proper dependency list (package.json) and corresponding lock file.

Steps to follow after opening a pull request.

• Check the travis-ci continuous integration build once it completes. This usually takes about 10 minutes ⏱, and if any tests fail you can find details in the build log.

• If somehow build fails / not passing then:

  • Try to fix whatever caused it to fail if you can.

  • Ask for help if you cannot fix it. If a pull request build is failing but you have not asked for help, we will assume that you have seen the errors and are still working on them.

• If you don't get reviewer feedback in couple of days ⏱, or you're waiting for followup, ping someone.

Do, we have to follow any code conventions?

Yes, you do please refer to Guidelines & Conventions 📜.

Do, we have to write unit tests for every new feature we add?

Ideally, pull requests should include new tests for any new features, as well, but it is an optional requirement.

Do, we have our own design system?

We do, to keep our designs consistent, we have created UI kit that contain many of our commonly used styles. http://www.ignitus.org/interface, please use buttons, typography, colors, navigation components etc. defined in the design-kit. if you are building a whole new section, try to divide that into atoms, molecules, etc and add them in the design kit and use it from there.

Frameworks.

• React - A JavaScript library for building user interfaces.

• Node- Executes JavaScript code outside of a browser.

• TypeScript - Superset of JavaScript that compiles to plain JavaScript.

• Redux - A Predictable State Container for JS Apps.

• Redux-Sagas - An alternative side effect model for Redux apps.

• Reselect - Selector library for Redux.

• Emotion - Emotion is a library designed for writing css styles with JavaScript.

• Express - Node.js web application framework.

CI/CD.

• Travis - Test and Deploy with Confidence.

• Hound - Automated code review for GitHub pull requests.

• CodeCov - Improves your code review workflow and quality.

• Netlify - Netlify builds, deploys and hosts your front-end.

• Husky - Git hooks made easy woof!

• Heroku - A cloud platform as a service supporting several programming languages.

• Docker - Empowering App Development for Developers.

• Istanbul - JavaScript test coverage tool.

Testing.

• Jest - Jest is a delightful JavaScript Testing Framework.

• Enzyme - JavaScript Testing utilities for React.

Database.

• MongoDB - The database for modern applications.

• Redis - Redis is an open source (BSD licensed), in-memory data structure store.

Dependencies.

• Sentry - Application Monitoring and Error Tracking Software.

• Axios - Promise based HTTP client for the browser and node.js.

• React Loadable - A HOC for loading components with promises.

• IDB - IndexedDB with usability.

• Font Awesome - Font Awesome is a font and icon toolkit based on CSS and LESS.

• React Router - Router for react applications.

Additional tools.

• Prettier - Prettier is an opinionated code formatter.

• ESlint - Find and fix problems in your JavaScript code.

Deprecated Stack 🧨 (We are migrating from this stack => TS, Emotion).

• SAAS - Syntactically Awesome Style Sheets.

• BootStrap 4 - JS UI Framework.

• Material UI - React components for faster and easier web development.

• Prop-Types - Runtime type checking for React props and similar objects.

• Lodash - A JavaScript utility library delivering consistency, modularity.

Migration Ideas. 💭

We also plan to introduce some new technologies in the near future.

• GraphQL - A query language for your API.

• Relay - The production-ready GraphQL client for React.

• Microservices in Golang - Go is a statically typed, compiled programming language

We are currently working on building the design system for our web application. Please have a look at Ignitus Figma project to have a look at our progress.

Color palette

The central principle of visual design in this app is the cleanness of user interface and the emphasis on the main elements of the content. Based on that was built look and feel of the app. For this purpose colors were defined as bold and engaging which can attract attention to an element even if it takes a small part on the screen. We also didn't want to confine our look into a limited choice of colors so it was decided to use many different shades for additional colors.

Defining our brand

Who we are?

Our mission is to bridge the gap between professor, students, researchers and scholars, by connecting them.

Our vision is to help research oriented people and help in boosting their resumes by providing opportunities.

Brand values

Helpful, Understand, Trustworthy

Voice and Tone

• Conversational

• Passionate

• Enthusiastic

• Intelligent

• Friendly

• Helpful

Design elements

The logo is composed of 2 elements- leaves and trunk. The logo symbolizes joining hands to form a community (in form of a tree trunk) and as it is a non-profit community so representing that in the form of a tree. From the name "Ignitus", the leaves can be looked in the form of flames to represent the passion and desire to help people.

The symbol is legible at most sizes, and a small version is provided for micro applications.

Logo

Usage on backgrounds

The full-color logos should be used only on white, black, grey or navy blue backgrounds. Avoid using full-color logos on photographs unless the logo sits on a black or white area of the image.

Colors

Gathering the insights about the education platform we decided to choose a Navy Blue color. Indeed blue is associated with open spaces, freedom, trust, loyalty, sincerity.

Typography

Based on our mission and vision, we wanted to find a font expressing a friendly and human feeling. so choosing American Typewriter.

Icons

To have a friendly feeling, I used the Rounded Material Design icons for the platform.

An Initiative to help students and professionals get handpicked top-quality global research and industrial opportunities 🎯.

Ignitus runs as a non-profit and works towards the upliftment of education equity worldwide by decentralising research, skill-acquisition, and employment opportunities.

We are creating a global open-source platform where anyone enrolled in an undergraduate/postgraduate program at any institution can look for opportunities, our unique value proposition is we are devoted to educational opportunities with no involvement of any startup, companies, etc. we are still in a phase of creating Ignitus our goal is to act as an opportunity bridge. 🚀

Our only goal is ❝ Skyrocketing a scholar career by providing the best global opportunities ❞. Ignitus platform has got exponential growth after successful Internship opportunities completion by the associated scholars in collaboration with researchers from Stanford Artificial Intelligence Laboratory (SAIL) & Oxford University 🏛.

We are committed to bringing together multiple initiatives for a grand scale open-source product development program for women's in technology. we are honoured to have among us more than admirable leaders in the fight for equal opportunities for women at & .

To know more about Ignitus feel free to browse mentioned resources.

Writings ✏️ that will help you better understand our mission.

• .

• .

• .

• .

• .

• .

• .

Presentations. 🎥

• .

• .

• .

• .

Ignitus is a collective effort by students & researchers from prestigious institutions e.g - Stanford, MIT, UCB, UCLA, USC.

(Excerpt from Google's Season of Docs)

The goal of Season of Docs is to provide a framework for technical writers and open source projects to work together towards the common goal of improving an open source project's documentation.

Let's bring open source and technical writer communities together, to the benefit of both. Together we raise awareness of open source, of docs, and of technical writing.

For further information on GSOD please refer its docs. 📒

How to communicate with us?

All communication should happen in Slack, GitHub.

Steps before getting accepted. 🎯

• You can start exploring project ideas towards the GSOD application phase.

• You can get yourself familiar with our technical architecture. 🚀

• You can review project ideas & ask Questions.

Steps after getting accepted. 🎯

• It would be great if you start writing your experience.

• We suggest to plan a schedule for weekly meetings with your mentor.

Steps after program completion. 🎯

• If you want you can stay involved with the Organisation.

• You can also volunteer to mentor in next GSOD.

Thanks for reading 📖, navigate to next page for project ideas.

The initiative facilitates people to collaborate and share their knowledge with others by creating short research talks on diverse topics and later own publish their research papers. 📜

It is an ongoing effort and supported through our slack. Anyone can propose a research paper of their interest and form a team to create a talk on it or join an existing team for another paper, you can also propose a paper co-authored by you. Currently, we’re only focusing on computer science conferences.

Once onboard, one goes through a 21-day cycle to collaboratively create the talk in an ad-hoc team, where the members are responsible for designing the structure, flow & content of a 5-minute short talk. The talk is finally published on YouTube 🎥 for a larger audience.

This is your chance to demonstrate your knowledge, impact research, and experience a unique collaborative initiative. 🙌🏻

Why collaborate? 💭

There are thousands of high impact papers, whose findings are not accessible to most of the world. To scale the effort of accessible research knowledge, we got to get together. A high-quality talk creation is a non-trivial endeavour and can be very time-consuming. Through collaboration, we want to change that and scale the process of video production.

A large number of scholars across the world 🌍 can learn from experiences of each and every student & inputs, helping newcomers by answering their queries regarding applying for Master of Science (M.S) program, seeking research opportunities, writing statement of purpose (SOP) etc. 🎓

Who is a talk representative/leader/DRI(directly responsible individual)?

A talk representative/leader/DRI is a person among you, who volunteers to co-lead the talk building effort. As a DRI, you will often be the person of contact for us. Your responsibilities may include: coordinating people and the process, improving, and synthesising the content - you will be credited and acknowledged for your substantial contribution.

Who are behind this program?

We have come a long way from humble beginnings, we now have 1400+ scholars 👨‍🎓 👩‍🎓researchers who have actively volunteered to be a part of our organisation. we aim to serve a larger student community in the future.

Can I propose a paper co-authored by me?

Sure, if your paper gains interest within the community, you can start working on creating a talk on it. It's a great way to spread your research and produce high-quality talk.

What is the prerequisite in order to contribute to the program?

Please apply only if you’re passionate about research, collaborative in nature and willing to commit your time. Though no specific skill set is required, applicants are expected to have some level of expertise in the area of paper for which talk is being created.

To participate in the program, you must be 18 years of age or above. You can be a student, a professional or an enthusiast. You can come from any part of the world 🌍.

Welcome the sky is the limit.

How can I apply?

Please visit our careers.

Getting Started

What are the prerequisites ?

• git (to clone the repository).

• node <= v11.10.1

How to set up the project locally?

1. Fork https://github.com/Ignitus/Ignitus-client.git

2. Clone git clone https://github.com/your_username/Ignitus-client.git

3. Once cloned navigate using cd Ignitus-client

4. Open terminal execute npm install

5. Now execute npm start

6. Navigate to http://localhost:3000 🚀

Docker Setup 🐳

docker-compose up

Tools 🔨

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.

To run ESLint use.

npm run lint

This option instructs ESLint to automatically try to fix as many issues as possible. 🛠

npm run lint:fix

GIT convention.

• Please don't commit your package-lock.json until & unless you are not adding a new package.

• Please create a new feature branch from develop not from master, and also create a pull request to develop not to master.

Naming convention.

• Use camelCase for defining variable as const, let.

• Use camelCase for className.

• Use camelCase for function and method names.

• Use camelCase for property names and local variables.

• Use PascalCase for defining name of Component & and file that holds that component.

• Use ignitus-PascalCase for directories. e.g - ignitus-CoreTeam.

Iconography convention.

• Use SVG Icons defined in ignitus-Icons, if you don't find the icon you want to use download its SVG from font-awesome/Material-icons, please don't forget to give them credits by leaving a comment in the file.

• Only use the Material Rounded Icons and don't add from any other outside websites. In case, you do not find that icon in the list, please ask the maintainer.

Types convention.

• Please name Types in PascalCase. e.g - Types TeamItemProps is written in PascalCase.

• Do not export types or functions unless you need to share it across multiple components.

• Do not introduce new types or values to the global namespace.

Directory Structure convention. 📁

Strings convention.

• Use 'single quotes' for strings.

ES6 convention.

• Use arrow functions => over anonymous function expressions.

• Always surround loop and conditional bodies with curly braces.

Readability & Formatting convention.

• Please move all relative imports after absolute imports.

• Please don't use IDS in html tags.

• Please use semantic classNames that makes some sense about the content inside them.

• Please use rem everywhere instead of em, px, vw.

• Colours should be written in hexadecimal form and should be picked from colors.ts, if it is not present there then create a new const for that color.

• Please avoid inline-styles.

• CSS properties should be ordered in alphabetical order.

Copy

background,
border,
border-radius,
color,
font-size,
font-weight,
padding,

Error

• If you get any err similarly to this Node SASS could not find a binding for your current environment, try switching node version to v8.16.2.

The source code of Ignitus is separated into a several directories , mostly following easy to understand separation conventions.

Here is the brief overview of source code directory structure.

src
├── ignitus-AboutPage/ - Components that constructs About page.
|   ├── ignitus-About/ 
|   ├── ignitus-CoreTeam/
|   └── ignitus-Team/
|   
├── ignitus-Api/ - Responsible for handling server request/response. 
├── ignitus-Authentication/ - Composed of authentication components.
|   ├── ignitus-CommonAuthenticationInterface/
|   ├── ignitus-CommonLoginInterface/
|   ├── ignitus-CommonSignupInterface/
|   ├── ignitus-ProfessorLogin/
|   ├── ignitus-ProfessorSignUp/ 
|   ├── ignitus-StudentLogin/
|   └── ignitus-StudentSignUpFlow/
|   
├── ignitus-CareersPage/ - Holds logic for CareerPage component.
├── ignitus-Dashboard/ - Composed of components that constructs Dashboard.
|   ├── ignitus-DashboardHeader/
|   └── ignitus-StudentDashboard/
|   
├── ignitus-HomePage/ - Components that constructs Home page.
|   ├── ignitus-Contributors/
|   ├── ignitus-GetStarted/
|   ├── ignitus-Home/
|   ├── ignitus-Introduction/
|   ├── ignitus-SupportedBy/
|   ├── ignitus-Testimonial/
|   └── ignitus-WhatWeDo/
|   
├── ignitus-Routes/ - Here routes are seperated into different categories
|   |                 to ensure code redability. 
|   ├── ignitus-AuthenticationRoutes/ 
|   ├── ignitus-DashboardRoutes/
|   ├── ignitus-PrivateRoutes/ - Only accessible to authenticated user. 
|   ├── ignitus-PublicRoutes/ 
|   └── ignitus-UserInterfaceBookRoutes/
|   
├── ignitus-Shared/ - 
|   ├── ignitus-DesignSystem/
|   |     ├── ignitus-Assets/ - Comprises of svg, Images.
|   |     ├── ignitus-Atoms/ - Comprises of buttons, dropdowns etc.
|   |     ├── ignitus-Layout/
|   |     ├── ignitus-Molecules/ - Comprises of overlay, scrollBar etc.
|   |     ├── ignitus-Organisms/ - Comprises of Footer, Nav. etc.
|   |     └── ignitus-Templates/
|   ├── ignitus-ErrorHandlingComponents/ - 
|   |     ├── errorBoundary/ 
|   |     └── errorHandling/
|   ├── ignitus-Utilities/ - Comprises of helper functions, custom-hooks
|   |     |                   & global shareable components etc.
|   |     ├── Components/
|   |     ├── HelperFunctions/ 
|   |     └── reactHooks/
|   └── types/ - Here globalTypes are defined.
|   
├── ignitus-UserInterfaceBook/
|   ├── Components/ - Container components used to display components 
|   |     |           here http://www.ignitus.org/interface 
|   |     ├── Atoms/
|   |     ├── Layouts/
|   |     ├── Molecules/
|   |     ├── Organisms/
|   |     └── Templates/
|   └── InterfaceSideNavigation/ - https://www.npmjs.com/package/side-navigation-react

IDEA: Ignitus client & API documentation. 🚀

Let's start with Client documentation, Welcome to the Ignitus Design System – an open-source library of React components for creating features @ignitus. It was originally created to help our teams work faster together, but it can be easily adapted to create applications with the look and feel of your own experience.

Why we created a design system?

We created this Design System with several goals in mind:

• To document components, patterns, and design guidelines, all in one place.

• To ensure consistency in our code and design.

• To standardise the visual language and experience of our products.

• To provide guidance on the correct usage of the patterns.

• To streamline our design and development.

• It is a great platform to inform, inspire, promote and be the single source of truth for everybody within organisation working on different features.

Why should we document it?

• We perceived that newcomers find it difficult to understand the workflow of existing UI components in turn difficulty in contributing to projects.

• Contributors work in different ways & styles, they work with different tools and they all work at different levels of maturity in turn ended up with their own implementation.

• Documenting it will not only be helpful to newcomers but may also encourage the adoption of our design system.

• It will be helpful to those who are willing to contribute to design system alone.

It is a collection of React UI components for quickly building user interfaces at our organisation, sooner we plan to publish it as an NPM Package as well. 🍻

You should check out our living style guide, which contains list of components unfortunately. At the moment, we are missing insightful documentation for our library.

Now let's move to API documentation.

The main objective is to document API in such a way that it would be easily understandable to new and existing contributors. As we believe a well-documented API and usage/ use-case document can assist in overcoming the bottleneck of trying out the APIs.

What we are looking in terms of API documentation?

• A use-case of the API, with some conceptual definition indicating what purpose a particular api call serves.

• A use-case of the API, depicting payload structure sent by the client.

• A use-case of the API, depicting required/optional properties sent by the client.

• A use-case of the API, depicting type of request sent by the client.

That's all we want to accomplish with Google season of Docs 😃.

Project summary

Difficulty Level:

Moderate

Expected Outcome:

• We would be delighted to have understandable & simple human-friendly documentation enhancing design system experiences of our users.

• It would be great if almost all the resources served by our API are documented.

• It would be great if API & Design System docs should be easily understandable by contributors.

• A great documentation, where everything we need is effortlessly communicated.

Required Skills/knowledge:‌

• Experience with technical writing.

• Brief knowledge of languages, frameworks etc used at Ignitus.

• Motivation & Enthusiasm towards our mission at Ignitus.

Admins:

Divyanshu Rawat & Afelio Padilla

Mentors:

Paarmita Bhargava & Mayur Sarvaiya

Note: Feel free to contact us on slack if you have any Questions :)

How to communicate with us?

All communication should happen on Slack, GitHub.

What is the deadline for any task submission?

Ideally be active and complete your tasks within the appropriate duration. ⏱

What is the Technical stack for this project?

Please refer here.

How to start as a beginner so as to contribute to the project?

There are many beginner level issues to begin with which includes documentation 📄, development & design. Also, feel free to open new tickets, contributors can claim a ticket by commenting on it. We are always open to new ideas and suggestions.

Here are some of the tools that we use @Ignitus to manage our day-to-day workflow. ☸

JIRA

It is a tool developed by Atlassian. It is used for bug tracking, issue tracking, and project management.

Feel free to join us by clicking on the invite link.

Confluence

It is a collaboration software program developed and published by Australian software company Atlassian.

Feel free to join us by clicking on the invite link.

AngelList

We list our openings on AngelList, feel free to browse them here.

Slack

It's where the people you need, the information you share, and the tools you use come together to get things done.

All communications @Igntius take place on slack, Feel free to join us by clicking on the invite link.

Github

It brings together the world's largest community of developers to discover, share, and build better software.

If you are interested in joining us on GitHub please open a ticket stating your interest in joining us. https://github.com/Ignitus/Ignitus-client/issues.

GitBook

It is a modern documentation platform where teams can document everything from products to internal knowledge-bases and APIs.

If you want to help us in writing docs, feel free to let us know through slack we will add you as a writer in our GitBook doc.

Figma

It is a digital design and prototyping tool.

Access our existing designs here.

Design team

Ignitus design is a loose, informal team that works on the design of the user experience and developer experiences. The primary areas of work are web application design, visual theme, and icons. Resources for each of these areas can be found in the Github repo.

The main person managing the designs is Paarmita Bhargava. The best way to contact the team is through the #design on slack.

We use slack to communicate on smaller issues, talk about what to work on next, and just general chatter. It’s good to get to know the other people and for the organization in general.

Design guidelines

The simplest way to contribute to ignitus design is to submit bugs, enhancement requests, see if design breaks UX principles or guidelines. You can create an issue in Github to do so.

The process to do so is the following:

• First, discuss the idea with the team on the slack #design channel.

• Once all agree on the decision, proceed with opening an issue in theGithub repo so that it's not forgotten and be tracked.

• You can start with cloning theFigma project locally and start designing!

• When the proposal is finalised, provide a solution in the issue opened, with the link to the edited Figma file and giving edit access to paarmita1998@gmail.com

• Once approved, it will be added to the original design.

We support all users from beginners to experts

We believe that in a non-profit community everybody is welcomed. We have a task for everyone interested to join. We stay with users every step of the way to help them learn fast as a beginner and then become an expert over time.

We're building one product, together

We're highly focused on ensuring that no matter how big our product gets, the entire experience stays cohesive, consistent, and interconnected.

Tools

Balsamiq, or pencil & paper for wireframes.

Figma: for designs

Familiarizing oneself with the Figma tools and features. Figma allows you to design and prototype together, in real-time and in one place.

To join the design team, ping in #design on slack. As it is a non-profit organization, so we are on the Figma free plan and can only provide view-only access.

We are many working on the Design system, Web app, and Landing Page pages in the Figma project.

UX Design process

Who are the users?

The users of this platform will be researchers, scholars, students, and professors from all over the world, whose goal is to work on a research project collaboratively. They will work in groups and communicate through a messaging feature.

Interviews & Surveys

I conducted contextual interviewed on a call with the professors, researchers, and students to understand our core users, their environment, and majors tasks to accomplish. I gathered data on their current workflow and major challenges. This data helped us in finding opportunities to solve the problems.

Participants

We chose 6 people including Students (1 from India and 1 from the US), 2 Professors from CMU to interview, and researchers and scholars working in universities on their research paper. Interviews conducted were semi-structured and from universities, Berkeley, CMU, Stanford, etc.

Interviews Script

1. What's the context? 2. What are your major tasks? 3. How do find students/opportunities? 4. What are the major problems faced? 5. How do collaborations happen? 6. What tools do you currently use?

Survey

I thought of creating a google form with some questions to reach a large number of audience like: 1. What frustrations or issues users have? 2. Where do they look for projects? 3. How do they collectively work on a project remotely?

DEFINE

User Persona

Based on the user research results data, we created personas for students with problems faced by him.

Jimmy represents a student who is trying to search for a job/research in his specific field and at the same time wants to build his resume strong. So basically he served as my primary persona which I wanted to focus on for this project.

IDEATE

Site Map

After we had brainstormed potential solutions and analyzed pain points, we created a detailed site map outlining features needs to be developed. This allowed us to get a grasp into how the platform would work system-wide. This allowed me to stadrt designing a specific step-by-step process.

Making Connections

Time to connect the dots. I took some colored pens and started marking up my user post-it wall. I used red to indicate problems with the app and purple to indicate emotional responses. I also used yellow post-its to write out each emotionally-charged word that was expressed during my interviews. I added those emotions to my wall to help me keep user needs at the center of my design and finally discussed my finding with the team.

Once we gained a clearer picture of our users, we started generating design solutions in the form of paper prototypes.

By doing wireframes in Balsamiq, we were able to go through a lot of design ideas and quickly find the right ones. Moreover, they also allowed backend developers to begin with the most fundamental database structure of the app interactions and discover the technical limitations of which we couldn't have known before.

Development

Once we have a design, now it's time to hand it off to developers. Thanks to Figma, developers can analyse the project as a whole and get the required assets and CSS for the screens. As this is a open-source project, so I decided to start build the design system and then create the screens and features step by step. So, workflow looks like this: I create a github issue explaining details and providing assets and help the contributors with any questions. Then I constantly approve the issues for user interface and designs, this is how, it's going so far.

We are still building the platform and taking part in various open-source programs. View more details in Github

Testing

Testing and iteration is a continuous process, so I keep contacting different users and collect the feedback. I use the commenting feature of Figma to collect user feedbacks on the design and communicate about different ideas. So, this is an ongoing task which I am working on in my free-time.

Next Steps

These are some points which I plan to work in future:

• Make a design component library- As when the project was started figma didn't had soo many features.

• Design the Professor's journey.

• Internal Design critiques and feedback modifications.

• Work on Brand Application to promote the idea.

• Application front-end development with our own Design System.

Let's connect and feel free to join the slack, if you are interested in the idea and want to help the community.