Showcase App

Introduction

The idea behind this project is to list all other collaborative projects in a web app that is offline capable and is built using modern web platform features. A user can see a list of cards with details about all other collaborative projects under Udacity's Mobile Web Scholarship program. This list can be filtered/sorted based on categories and different features that the listed projects use. Users can see detailed info for projects by clicking on an individual card and see live experience as well.

Stack

We've decided to use MERN stack in our project. That means we'll be using Mongo, Express, React and Node to build our entire architecture. For the PWA related functionalities, we've decided to build the prod SW file with CRA itself but we've tried our best to separate those source files into Vanilla javascript modules so that anyone not familiar with React or CRA but have completed the full course can contribute easily to the project.

How to Contribute

The best way to get started with contributing is to identify a feature, bug or module that is open for contributions. Non-code contributions are also counted. You can contribute by helping people on issues board (for ex. someone is having trouble setting the repository and running app or any other queries). For code style and commit guidelines please see CONTRIBUTING.md

Design Guidelines

A Design Guideline has been created for reference. Please refer to it while making changes in UI.

Labels

We are using Github labels to categorize issues and pull requests.

Label	Description
bug	Something isn't working as expected. Probably implementation is wrong.
duplicate	This issue or pull request already exists
enhancement	New feature or request
good first issue	We know where the problem lies, we'll provide info in issue. But we think this is a good issue to work on if you are a new contributor and want to get started with the project
help wanted	We need to consult the community on this issue or we need help regarding this
open for claim	this issue is open for anyone who wants to contribute. note: if you want to claim the issue, please comment on it with brief details on how you'd want to approach the problem
invalid	This issue or PR doesn't seem right
question	This is a query, further information is requested
wontfix	We know this issue or feature request, but after consulting among all the Co-Moderators, we've decided not to implement this feature or take this path
PR: change requested	Some change is required before merging this PR
PR: confirm merge	PR is reviewed and ready to be merged
Nice to have	It is nice to have this feature, but we do not guarantee it yet.
Important	This is important to address
Urgent	This is urgent to address
Critical	This is critical to address

Project Set Up

Open folder you want to clone this repo into, then-

• Frontend
  • git clone https://github.com/UdacityMobileWebScholarship/showcase-app.git
  • cd showcase-app
  • yarn install - to install project dependencies
  • yarn start - to run development build
  • yarn build - to build prod release
  • yarn test - Launches the test runner in the interactive watch mode

Note: the front end app is bootstrap using Create React App. You can find more details about architecture here. See Project Wiki Page.

• Backend //TODO: init proj and add docs

How to use styles or SASS

1. Just run the development environment or production environment as usual with npm start and npm run build.
2. Create your SCSS files with an extension .scss and start writing SASS e.g. Button.scss.
3. While importing, use import './Button.css' (important since this is how it's done in CRA)

Note: We're ignoring *.css files by default because they will automatically be generated. So, if you try to add CSS files, you will not see them in the git status.

Moderators

Divyam Rastogi

Nabarun Pal

Parth Shandilya

Prabhanshu Attri

Shubham Sharma

Shashank Kumar

Ritik Rishu