coding-coach / coding-coach

This is the landing page :)

Gatsby's default starter

Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.

Have another more specific idea? You may want to check out our vibrant collection of official and community-created starters.

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the default starter.

   # create a new Gatsby site using the default starter
   gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-default-starter/
   gatsby develop

3. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

   Open the my-default-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

1. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

2. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.

3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

4. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

5. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

6. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

7. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

8. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

9. LICENSE: Gatsby is licensed under the MIT license.

10. package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

11. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

12. README.md: A text file containing useful reference information about your project.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

• For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

• To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

💫 Deploy

coding-coach's Issues

Delete Account

Acceptance Criteria:

• Users can delete their accounts.
• This will remove all data from the database.
• All current mentorships will be notified.

GDPR Compliance

Acceptance Criteria:

• GDPR compliance is implemented.

Sign Up

Acceptance Criteria:

• A user can sign up for a new account using their email address.
• A user can sign up for a new account using their social media accounts (oAuth).

Assets: https://projects.invisionapp.com/d/main#/projects/boards/6261486
Screens: https://projects.invisionapp.com/d/main#/projects/prototypes/15543566

Main Header Follow-Up: Use SVG instead of PNG

Issue

ZenHub Issue

The home page is displaying an illustration in the right side, currently is a assets/logo.png image, however we need to use a SVG instead of a png file. The reason for this is because we want to display nice and crispy images in retina/large displays.

The scope of this task is about removing the png file and using an svg file instead.

Google Analytics

Acceptance Criteria:

• Google Analytics are implemented in order to track user's interactions.

Main Header Follow-Up: Hover styles for links and button

Issue

ZenHub Issue

The hover styles for the button and links in the header section are missing. @emmawedekind will provide those styles soon.

Please work on this task until @emmawedekind provides the color/styles.

Migrate to JS-Lingui for i18n

Issue

Description

JS-Lingui is a relative new library for internationalization, the API is very similar to React18next, in fact the author decided to do this in order to easily migrate from other libraries.

It supports plurals as well as custom formatting for texts. The most important thing is that this library comes with a CLI that we can use to manage the keys/text in all the different languages that we will support.

When it comes to manage the translations, it’s near impossible to find out which keys are unused/missing without an automated tool. JS-Lingui alleviates this pain, by providing a CLI that we can use in development.

Finally, this library adds a few KB to the final build which is great for performance!

Direct Requirements

• Remove all i18next dependencies from package.json
• Remove the i18next code from src/config/i18n.js
• Setup JS-Lingui https://lingui.js.org/tutorials/react.html
• Using the CLI add the two languages that we support (en, fr)
• Migrate the existing translations in the components that we have

Indirect Requirements

• Install JS-Lingui
• Add JS-Lingui CLI to the dev dependencies
• Create a npm task in the package.json file to use the CLI https://lingui.js.org/tutorials/cli.html

Main Header Follow-Up: Remove png background and use css only

Issue

Relates to the Main Header Epic #54

Description

The current landing page contains an extra div to set the background. While this works is not ideal, this task is about removing the following div from the landing page:

<div class="src-pages-home-home-mainHeaderBackground"></div>

Then we need to implement the background using css only, I've prepared an example on how to achieve this with only css: https://codepen.io/crysfel/pen/gdVyjW

Make sure to remove the main-header-background.png file from the assets folder.

Package.json homepage

coding-coach/package.json

Line 5 in 0bad77a

"homepage": "http://coding-coach.github.io/",

This home page set in package.json is no loading and giving a 404 error. I think it should be codingcoach.io instead. Please check this once.

Regards!

Sign up with email

As a user I want to sign up into the app using my email address. Name, Email, Password and a checkbox to accept the terms and conditions.

Once I have entered my data, I want to click the Sign Up button to create my account. After the server successfully create my account, I should be redirected to the main page (TBD, maybe profile page? Or search?).

When implementing this, make sure to create a components/Textfield component, we want this component to be reusable in other parts of the application.

const classes = {
  root: styles.someCustomClassForTheRootElement,
  input: styles.customCssForTheInput,
  label: 'something-here',
};

<Textfield value={value} onChange={onChange} classes={classes} label="Email" />

Same for the Checkbox, we want reusable components.

The scope of this class is only to define the UI in the clientside. For the actual login in the backend take a look at:

Coding-Coach/coding-coach-api#9
Coding-Coach/coding-coach-api#12

User Profile

Acceptance Criteria:

• Users will be able to view their profiles.

Profile data will include:

• A badge indicating whether a user is mentor, mentee, or both.
• Name
• Job title (optional)
• Geographic location (City, country, timezone)
• Languages spoken
• Skills to be mentored on (mentee profile only)
• Skills to mentor in (mentor profile only)
• Recommendations (mentor profile only)

Search For Mentor

Acceptance Criteria:

• Users can search for a mentor using filters

Filters include:

• Languages spoken
• Geographic location (country, timezone, city)
• Topic to be mentored in (JavaScript, HTML)
• Topic short hands will be converted into their counterpart (JS => JavaScript, node => node.js)
• Gender

About section

As a visitor I want to learn more about the project.

Create a react component that takes the title, description, direction, classes and icon as properties. This component should render the title, description and icon in the given direction (left, right).

Text will be provided later on, for now you can use a placeholder text.

We are going to use this component to render the mission section as well.

Assets will be uploaded to this tasks once are ready.

Send Mentorship Invitation

Acceptance Criteria:

• Users can send mentorship invitations to available mentors.
• Users can customize the invitation message, or use one of the pre-selected messages [TBD].

Support absolute imports

Before this grows I'm wondering if there is interest in configuring absolute import paths (import Item from 'components/some-component' instead of import Item from '../../some-component'). I can set this up if wanted

big blobs in history

Issue

Description

Currently the repository is 32MB in size due to files which are still in the history.

Steps to Reproduce

$ java -jar bfg-1.13.0.jar --strip-blobs-bigger-than 1M coding-coach.git

Using repo : C:\Users\Daniel\GITHUB\coding-coach.git

Scanning packfile for large blobs: 475
Scanning packfile for large blobs completed in 37 ms.
Found 1 blob ids for large blobs - biggest=33745871 smallest=33745871
Total size (unpacked)=33745871
Found 48 objects to protect
Found 4 commit-pointing refs : HEAD, refs/heads/development, refs/heads/gh-pages, refs/heads/master

Protected commits
-----------------

These are your protected commits, and so their contents will NOT be altered:

 * commit 7f4b0e2e (protected by 'HEAD')

Cleaning
--------

Found 93 commits
Cleaning commits:       100% (93/93)
Cleaning commits completed in 5.534 ms.

Updating 3 Refs
---------------

        Ref                      Before     After
        --------------------------------------------
        refs/heads/development | 7f4b0e2e | 26166b8e
        refs/heads/gh-pages    | 07e62aeb | 1e32a444
        refs/heads/master      | 67f0fa0f | 82170598

Updating references:    100% (3/3)
...Ref update completed in 208 ms.

Commit Tree-Dirt History
------------------------

        Earliest                                              Latest
        |                                                          |
        DDDDDDDDDDDDDDDDmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

        D = dirty commits (file tree fixed)
        m = modified commits (commit message or parents changed)
        . = clean commits (no changes to file tree)

                                Before     After
        -------------------------------------------
        First modified commit | 946eebdc | c7aa9752
        Last dirty commit     | 2e3caf80 | 59371254

Deleted files
-------------

        Filename              Git id
        ----------------------------------------
        mentor.e74bdc89.png | f526c845 (32,2 MB)
        mentor.png          | f526c845 (32,2 MB)


In total, 118 object ids were changed. Full details are logged here:

        C:\Users\Daniel\GITHUB\coding-coach.git.bfg-report\2018-09-25\20-56-27

BFG run is complete! When ready, run: git reflog expire --expire=now --all && git gc --prune=now --aggressive

Direct Requirements

• a new clean branch without these big blobs should be created (in the future)

gh-pages

Currently http://coding-coach.github.io/ leads to desert 404 #68. Do we still need gh-pages?

Main header

As a visitor I want to see the main header in the landing page. At the top left it should include links to the three sections on the page.

• About When clicking on this link, the page should scroll to the about section
• Mission When clicking on this link, the page should scroll to the mission section
• Contact When clicking on this link, the page should scroll to the contact section

At the top right, there should be three links to the social networks accounts for the project.

• Twitter https://twitter.com/codingcoach_io
• Instagram TBD
• Facebook https://www.facebook.com/codingcoachio/

Follow design specs for the title, description, image, colors, etc. The Learn More button should take the user to the About section

Log In

Acceptance Criteria:

• A user can log in to their account using their email address.
• A user can log in to their account using their social media accounts (oAuth).
• A user can reset their password via a 'Forgot password' link.
  

Assets: https://projects.invisionapp.com/d/main#/projects/boards/6261486
Screens: https://projects.invisionapp.com/d/main#/projects/prototypes/15543566

Tests are broken

Seems that some files are missing for the test script to work correctly:

[william@william-pc coding-coach]$ yarn test
yarn run v1.9.4
$ node scripts/custom-config test --env=jsdom
/home/william/Dev/Self/WNemencha/coding-coach/node_modules/proxyquire/lib/proxyquire.js:161
    throw err
    ^

Error: Cannot find module '../utils/createJestConfig' from '/home/william/Dev/Self/WNemencha/coding-coach/node_modules/react-scripts/scripts'
    at Function.module.exports [as sync] (/home/william/Dev/Self/WNemencha/coding-coach/node_modules/resolve/lib/sync.js:43:15)
    at Proxyquire._resolveModule (/home/william/Dev/Self/WNemencha/coding-coach/node_modules/proxyquire/lib/proxyquire.js:137:20)
    at Proxyquire.<anonymous> (/home/william/Dev/Self/WNemencha/coding-coach/node_modules/proxyquire/lib/proxyquire.js:205:35)
    at Array.reduce (<anonymous>)
    at Proxyquire._withoutCache (/home/william/Dev/Self/WNemencha/coding-coach/node_modules/proxyquire/lib/proxyquire.js:204:6)
    at Proxyquire.load (/home/william/Dev/Self/WNemencha/coding-coach/node_modules/proxyquire/lib/proxyquire.js:129:15)
    at Object.<anonymous> (/home/william/Dev/Self/WNemencha/coding-coach/scripts/custom-config.js:39:5)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Landing page

As a visitor I want to see the landing page displaying details about the project.

Registration Welcome Email

Acceptance Criteria:

• Users will receive a welcome email upon registration asking them to confirm their account.
• Text [TBD]

Main Header Follow-Up: Remove additional `<h1>`

Issue

Description

In the home page, the current implementation uses two h1, we only need to have one h1 in the entire page.

The scope of this task limits to remove the second h1 and put all the text in a single h1 element, make sure to use the i18n library that we have.

Background image break the responsiveness of the website on mobile

Remove build folder from the Git repository.

Because it makes the repo' longer to clone, and also because it doesn't serves any purpose at all. :)

User Dashboard

Acceptance Criteria:

• Mentors and mentees can see whether they have any mentorship messages.
• Users can see their notifications at a glance.
• Users can clear all notifications.
• Users can clear individual notifications.

Mentor

Mentee

Assets

All icons, designs, and color hex codes can be found on the Sketch cloud here: To be added

Make the code available under a license

As this is a project for people to learn from, I'd suggest some MIT/WTFPLv2 👌

Remove Mentor

Acceptance Criteria:

• Mentees have the ability to remove a mentorship.
• When a mentee terminates a mentorship, the relationship is ended on both sides.
• The mentee can select a reason for terminating the mentorship, or add a custom message.
• The mentor will receive a notification informing them that the mentorship was terminated.
• The mentorship will be removed from the mentor's dashboard.
• The mentorship will be removed from the mentee's dashboard.

Mentorship Invitations

Acceptance Criteria:

• Users can expand incoming and sent mentorship invitations.
• Mentors can view details for the mentee who sent the invitation, and click into their profile.
• Mentors can accept or reject a mentorship invitation.
• Mentors can add a custom reason for declining a mentorship invitation, or select from a list of pre-populated rejections [TBD].
• Mentees can view details for the mentor who received the invitation, and click into their profile.

Account Settings

Acceptance Criteria:

A user can update the following required fields:

• Name
• Email address
• Job title
• Languages the user speaks

A user can update the following optional fields:

• Social media accounts
• Company
• Skills to mentor in (depends on account type)
• Skills to be mentored in depends on account type)

Users will be able to set their account type to be mentor, mentee, or both.

A mentor can update the following fields:

• Skills they are able to mentor in
• Proficiency of skills they are able to mentor in

A mentee can update the following fields:

• Skills they are looking to improve

All users are able to set themselves as a mentor.

process.env

Issue

Description

Using process.env is not great as the used env variables seem to be not declared anywhere. We should use cross-env for testing purposes and use some config for setting them instead of using process.env.

Mission section

As a visitor I want to see the mission for the project.

We want to reuse the same component we used for the About section, all we need to do is send the data and additional custom css classes using the classes property.

Assets will be provided once ready.

Remove Mentee

Acceptance Criteria:

• Mentors have the ability to remove a mentorship.
• When a mentor terminates a mentorship, the relationship is ended on both sides.
• The mentor can select a reason for terminating the mentorship, or add a custom message.
• The mentee will receive a notification informing them that the mentorship was terminated.
• The mentorship will be removed from the mentor's dashboard.
• The mentorship will be removed from the mentee's dashboard.

Coding Coach Beta

Acceptance Criteria:

• Page describing how to participate in Coding Coach Beta with a link to the Slack organization: coding-coach-beta.slack.com.

Contact section

As a visitor I want an easy way to contact the team.

In this section, there should be a link to the slack organization and an email to contact.

• Slack https://join.slack.com/t/coding-coach/shared_invite/enQtNDMyMzUzNjAxODQyLTUwYTFkMzZmNGFhMzZjYTQwOWE2YWFjOGJhNzYyOGIxNDM5Zjc1YWQ4NjMwN2U5YzBlNjkwMTI2ZDNiOWQyMzM
• Email [email protected]

This section also display links to the social network accounts.

• Twitter https://twitter.com/codingcoach_io
• Instagram TBD
• Facebook https://www.facebook.com/codingcoachio/

Make use of lint-staged to ensure code consistency

We might want to integrate lint-staged/husky hooks so we always have code following the repository code-style. ;)

Relevant links:

• https://blog.fossasia.org/integrate-prettier-with-lint-staged-and-eslint-for-consistent-code-style-throughout-the-project/
• https://github.com/okonet/lint-staged

GDPR Privacy Statement

Main Header Follow-Up: Responsiveness

Issue

ZenHub Issue

The current header in the home page is not responsive, in this task we need to set the width of the image on the left based on the parents width.

We are using flex to set the width of the parents, we need the SVG image to get the same width as the parent div and also to keep the ratio consistent, meaning the height should adjust based on the given width.

The scope of this task is only to adjust the width of the illustration.

Design for mobile: https://www.figma.com/file/MfEpHTzcJZTnclKSojQQdhpp/CodingCoach-Design-System?node-id=529%3A62

Report Abuse

Acceptance Criteria:

• Users will be able to report abuse from the footer of the application.
• Users will select the mentor/mentee that is violating the code of conduct.
• Users will give an explanation of the situation.
• Sent report abuse claims will be sent to the [email protected] account.

Main Header Follow-Up: Font Ratios seem a little off

Issue

ZenHub Issue

The font ratios in the header are a little off, please follow the specs https://www.figma.com/file/MfEpHTzcJZTnclKSojQQdhpp/CodingCoach-Design-System?node-id=529%3A62

Travis badge in readme not working

Issue

Description

Travis integration config has been added in PR #28 but it seems that repo has not been integrated with Travis yet, as the Travis badge in readme page doesn't seem to be working.

Steps to Reproduce

• This build at jagzviruz/coding-coach seems to work fine.

  • Image url - https://api.travis-ci.org/jagzviruz/coding-coach.svg?branch=feature/travis
  • Badge working -

• But https://travis-ci.org/coding-coach/coding-coach does not exist yet.

  • Image url - https://api.travis-ci.org/coding-coach/coding-coach.svg?branch=development
  • Badge not working -

Upgrade to react-scripts v2

react-scripts v2 introduces support for css modules without ejecting: facebook/create-react-app#3815

EDIT
If we decide to merge this PR: #16, we won't need to upgrade react-scripts anymore, instead just add our custom configurations into the custom overwrites in that PR

About Us

Acceptance Criteria:

• About Us page is easy to find.

add AppVeyor (CI for Windows)

Description

AppVeyor is a CI service like Travis CI and others. But with one difference. We can test on Windows there. This would also catch issues like #78

Direct Requirements

• automated CI on Windows

Landing page

As a visitor I want to see the landing page displaying details about the project.

This is an epic, please take a look at the tasks under this epic:

• Main header #54
• About section #55
• Mission section #56
• Contact section #57

Mentor Recommendations

Acceptance Criteria:

• A mentee can recommend a mentor (only once).
• A mentee can leave a personalized message (mandatory).
• A mentee can recommend a mentor for specific skills.
• The recommendation will be published to the mentor's profile.
• Recommendations should have a 'Report functionality.'
• A mentee can delete, or edit, their mentor recommendation.

Contact Us

Acceptance Criteria:

• Contact Us is available on the site footer or navigation.

Using $font variable

coding-coach/src/containers/App/assets/app.scss

Line 30 in d199d0b

font-size: 5em;

coding-coach/src/theme/base/_elements.scss

Line 8 in 93df651

font-size: 16px;

I think we should use $font- variable from _variables.scss here in order to be consistent throughout the app.

Mission Statement

Acceptance Criteria:

• Mission statement is easy to find.
• Document is in progress.

Using i18n for image alt static text

Issue Description

I think we should use i18n for this static text used for image alt.

Code Link

coding-coach/src/containers/App/App.js

Line 10 in 63eb963

<img src={require('./assets/mentor.jpg')} alt="Mentor" className={styles.image} />

Issue Level

Minor

Issue Priority

Low

Previous Discussion PR

#70 (comment)