junior-devs / 2020-junior-devs-project

2020 collaboration project for members of the Junior Devs group

2020 Junior Devs Project - Earth Academy

2020 collaboration project for members of the Junior Devs group

Purpose of this project

The main goal of this project is to enable members of the Junior Devs group to collaborate and learn valuable skills such as remote collaboration, practice their programming skills, learn new frameworks, and add a nice project to their portfolio, among other things.

All members of the group had a chance to add their ideas for a project to work on together, and we finally decided on one via a poll on the Telegram group. The details of the project are below.

In the following days we will discuss how the work will be organized and more information will be added to this repository.

Details on the selected project

E-learning platform focused on educational material to reduce waste

• Creation of a landpage
• Catalog of available E-Learnings, with possibility to track completed, open, and in progress e-learnings
• Creation of 2 or more short E-Learnings, with at least 5 slides and a short exam at the end with a minimum requirement of 70%, otherwise the e-learning should be started again, or just the section that failed... Suggested topics for the e-learning
  • A journey to a "Zero Waste" Lifestyle
  • Packaging Free Shopping
  • Reduce plastic at home
  • How to classify correctly your home waste: Paper/Glass/Plastic/Textil/Organic( for compost)/....
  • How to make compost at home

Tech stack

We will be building this project with JavaScript: React on the frontend and Node.js on the backend. More details to come!

How to contribute to this project

Please read our contributing guide.

How to run the app

• Fork the repo. See our guide for this here

Design

https://www.figma.com/file/N32tINg0dN2bQTgWDNjNfS/Elearning-Platform-(home)-(Copy)?node-id=0%3A1

Backend

• See here how to set up the local database.
• In the main directory, run npm install
• Run npm start. If all went well you should see "NodeJS Server Running"

Frontend

• cd frontend
• Run npm install (the frontend and backend are two separate projects with separate package.json files, so you need to do this again inside the frontend directory
• Run npm run dev. If all went well, you should see "Server running at http://localhost:1234". You can now open the project at http://localhost:1234.

*** Important ***: There is a HelloWorld.jsx sample component with its corresponding test file (HelloWorld.spec.jsx) and story (HelloWorld.stories.jsx). DO NOT delete these, they are there as templates to help you and others get started.

To run Storybook:

• cd frontend if you're not already in the frontend directory
• Run npm run storybook. The browser will open up with Storybook.

2020-junior-devs-project's Issues

Create End Point for retrieving Course Data

Fork the main repo and checkout a branch named ep_get_course.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/get_course/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'

The endpoint should then retrieve the content in Table: courses:

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.
If result is 200:
created_by, name, description, approved

Please contact one of the mentors if there is anything that is unclear.

Create End Point for retrieving User Data

Fork the main repo and checkout a branch named ep_get_user.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/get_user/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'

The endpoint should then retrieve the content in Table: users:

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.
If result is 200:
first_name, email, bio_desc, avatar, role, active, confirm,email_verified_at

Please contact one of the mentors if there is anything that is unclear.

Create End Point for Updating Card Data

Fork the main repo and checkout a branch named ep_update_card.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/update_card/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'&module_id='value&name='value'&description='value'&content='value'&medialink='value'&order='value'&duration='value'&free='value'

If the record does not exist, the endpoint should create a new record in Table cards

module_id, name, description, content,media_link,order,duration_in_sec,is_open_for_free,created_at

Otherwise the endpoint should then update the content in Table: cards:

module_id, name, description, content,media_link,order,duration_in_sec,is_open_for_free,updated_at

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.

Please contact one of the mentors if there is anything that is unclear.

Create Bare Back End Server

Setup the bare back end server with Node.JS and Express.

Create Lesson card component

Create a component for the lesson card:

Requirements:

• Create the component
• Create a story on Storybook
• Hard code the title, description and other texts for now. There will be a ticket to update this in the future.
• Write tests - we'll use https://github.com/testing-library/react-testing-library
• Link to design where you can find the CSS: https://www.figma.com/file/HNLdpIu2S7kV0G03By3Sh1/Elearning-Platform-(home)?node-id=1%3A3

Create End Point for retrieving Learning Progress Data

Fork the main repo and checkout a branch named ep_get_progress.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/get_progress/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'

The endpoint should then retrieve the content in Table: learning_progress:

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.
If result is 200:
enrollment_id, card_id, begin, completion, status

Please contact one of the mentors if there is anything that is unclear.

Create course card component ("my courses") section

Create a component for course card in the "my courses" section:

Requirements:

• Create the component
• Create a story on Storybook
• Hard code the title, description and other texts for now. There will be a ticket to update this in the future.
• Write tests - we'll use https://github.com/testing-library/react-testing-library
• Link to design where you can find the CSS: https://www.figma.com/file/HNLdpIu2S7kV0G03By3Sh1/Elearning-Platform-(home)?node-id=1%3A3

Create End Point for adding Course Content

Fork the main repo and checkout a branch named ep_add_content.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at server/ep/add_content/.

Refer to the Database Schema Diagram and the API Documentation in the Wiki

GET arguments are passed with argument
?course='value'&module='value'&card='value'&content='value'&media='value'

The endpoint should then store the content in Table: fact_course_content:
course_id: course,
module_id: module,
card_id: card,
card_content: content,
media_link: media,
approved: False

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was sucessfull, 400 if not
If any of the field are missing, result should be 400

Please contact one of the mentors if there is anything that is unclear.

Create Front End App Template

Create the Front End React App Template with parcel

Create the course card component (overview page - "popular courses" section)

Create a component for course card in the "popular courses" section:

Requirements:

• Create the component
• Create a story on Storybook
• Hard code the title, description and other texts, and use whatever placeholder image for now. There will be a ticket to update this in the future.
• Write tests - we'll use https://github.com/testing-library/react-testing-library
• Link to design where you can find the CSS: https://www.figma.com/file/HNLdpIu2S7kV0G03By3Sh1/Elearning-Platform-(home)?node-id=1%3A3

Create End Point for retrieving Card Data

Fork the main repo and checkout a branch named ep_get_card.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/get_card/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'

The endpoint should then retrieve the content in Table: cards:

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.
If result is 200:
module_id, name, description, content, media_link, order, duration_in_sec,is_open_for_free

Please contact one of the mentors if there is anything that is unclear.

Remove Postcss

After ensuring postcss doesn't support some other plug-in, remove it from node_modules

Create End Point for Updating Learning Progress Data

Fork the main repo and checkout a branch named ep_update_learning_progress.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/update_learning_progress/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'&enrollment_id='value&card_id='value'

If the record does not exist, the endpoint should create a new record in Table learning_progress

enrollment_id, card_id, begin

Otherwise, the endpoint should then update the content in Table: learning_progress:

enrollment_id, card_id, completion

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.

Please contact one of the mentors if there is anything that is unclear.

...

Devs Projects

Create a "Learn more" button

Create a component for the "Learn more" button:

Requirements:

• Create the component
• Create a story on Storybook
• Write tests - we'll use https://github.com/testing-library/react-testing-library
• Link to design where you can find the CSS: https://www.figma.com/file/HNLdpIu2S7kV0G03By3Sh1/Elearning-Platform-(home)?node-id=1%3A3

Create End Point for Updating User Data

Fork the main repo and checkout a branch named ep_update_user.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/update_user/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'&name='value&emai='value'&bio_desc='value'&avatar='value'

The endpoint should then update the content in Table: users:

first_name, email, bio_desc, avatar, updated_at

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.

Please contact one of the mentors if there is anything that is unclear.

Create the mobile Navigation Bar

Create the mobile "hamburger" version of Navigation Bar for mobile devices.

For directions on Requirements see: #23

Create navigation bar component

Create a component for the navigation bar:

Requirements:

• Create the component
• Create a story on Storybook
• Use # as a placeholder for links for now, there will be another ticket to update this.
• Write tests - we'll use https://github.com/testing-library/react-testing-library
• Link to design where you can find the CSS: https://www.figma.com/file/HNLdpIu2S7kV0G03By3Sh1/Elearning-Platform-(home)?node-id=1%3A3

Create End Point for Updating Module Data

Fork the main repo and checkout a branch named ep_update_module.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/update_module/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'&course_id='value&name='value'&description='value'&order='value'

If the record does not exist, the endpoint should create a new record in Table modules

course_id, name, description, order,created_at

Otherwise the endpoint should then update the content in Table: modules:

course_id, name, description, order,updated_at

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.

Please contact one of the mentors if there is anything that is unclear.

Create End Point for Updating Enrollment Data

Fork the main repo and checkout a branch named ep_update_enrollment.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/update_enrollment/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'&userid='value&courseid='value'

If the record does not exist, the endpoint should create a new record in Table enrollment:

user_id, course_id, enrollment_date, enrollment_date

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.

Please contact one of the mentors if there is anything that is unclear.

Create End Point for Updating Courses Data

Fork the main repo and checkout a branch named ep_update_course.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/update_course/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'&createdby='value&name='value'&description='value'

If the record does not exist, the endpoint should create a new record in Table courses

created_by, name, description, created_at

Otherwise the endpoint should then update the content in Table: courses:

created_by, name, description, updated_at

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.

Please contact one of the mentors if there is anything that is unclear.

Create End Point for retrieving Module Data

Fork the main repo and checkout a branch named ep_get_module.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/get_module/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'

The endpoint should then retrieve the content in Table: modules:

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.
If result is 200:
course_id, name, description, order

Please contact one of the mentors if there is anything that is unclear.

Create Endpoint for retrieving Enrollment Data

Fork the main repo and checkout a branch named ep_get_enrollment.
When completed push your changes and create a PR.
Reference the description and ticket number in your PR comment.

Create an endpoint at {server}/api/get_enrollment/.

Refer to the Database Schema Diagram in the Wiki

GET arguments are passed with argument
?id='value'

The endpoint should then retrieve the content in Table: enrollment:

The endpoint should then return as pure JSON (not JavaScript):
result: 200 if the update was successful, 400 if not.
If result is 200:
user_id, course_id, enrollment_date

Please contact one of the mentors if there is anything that is unclear.