monday-morning / project-tahiti

The repository for the Client Application of Monday Morning, the official student media body of NIT Rourkela.

Monday Morning

The Official Student Media Body of NIT Rourkela

View Live • View Issues • Report Bugs • Suggest Features

Release Status

Project Overview

Table of Contents

1. About Monday Morning
2. About the Project
3. Built With
4. Getting Started
   • Prerequisites
   • Contribution guidlines
   • Local Repository Setup
   • Running the project
5. License
6. Contributors

About Monday Morning

Monday Morning is the student media body of National Institute of Technology, Rourkela. Since its inception in 2006, it has constantly served as a vital link between the student community and the administration. The weekly e-newsletter serves as a news feed for the students, professors and alumni of the institute, featuring campus activities, department updates, recruitment information, SAC happenings, alumni news, weekly polls and interviews of the Director, Chief Warden, professors, distinguished alumni and dignitaries and exceptional students. Apart from the online weekly edition, Monday Morning also publishes print editions and organises the Open House Discussion.

About the Project

Project Infinity is about updating the Monday Morning website using modern technologies which is divided accross 3 main sub-projects.

1. project-tahiti: The Client side application of the website.
2. project-reclamation: The Server application of the website.
3. project-pegasus: The cross-platform Mobile application of the Monday Morning.

Built With

Following technologies and libraries are used for the development of this website

• React
• Next
• Webpack
• Material-UI
• Firebase
• GraphQL
• Apollo Client

Getting Started

To setup the project locally follow the steps below.

Prerequisites

• Node.js

  # Homebrew
  brew install nodejs

  # Sudo apt
  sudo apt install nodejs

  # Packman
  pacman -S nodejs

  # Module Install
  dnf module install nodejs:<stream> # stream is the version

  # Windows (chocolaty)
  cinst nodejs.install

• Yarn

  npm install --global yarn

• Git

  # Homebrew
  brew install git

  # Sudo apt
  apt-get install git

  # Packman
  pacman -S git

  # Module Install (Fedora)
  dnf install git

Contribution guidlines 🎃

NOTE 1: Please abide by the Contributing Guidelines.

NOTE 2: Please abide by the Code of Conduct.

Local Repository Setup

Please refer to the project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

1. Fork the repo on GitHub
2. Clone the project to your local system
3. Commit changes to your own separate branch
4. Push your work back up to your fork
5. Submit a Pull request so that we can review your changes

Running the project.

The project uses Yarn and not NPM. It is strictly advised to stick with Yarn so as to avoid dependency conflicts down the line. After cloning the fork repo, follow the give steps.

## Checkout into the project client directory
cd client

## Install Dependencies
yarn install

## Run the Project
yarn develop

Following are the commands to remove/add new dependencies using yarn

## Add a new Package
yarn add package_name

## Remove an existing Package
yarn remove package_name

## Save Package as a Dev Dependency
yarn add -D package_name

License

Distributed under the MIT License. See License for more information.

project-tahiti's Issues

Setup Firebase Hosting

1. Setup Firebase Hosting
2. Setup github action for CI/CD
3. Setup github action for prettier and eslint
4. Add configuration file for vscode

Create User Profile Page

Add User profile page with all the required subesection

• Profile
• dashboard
• Interested Topics
• Newsletter
• verify Account
• forgot password

And Logic for those as well

Add Scroll To Top

Create a 404: Page not found page

Get the designs from the Design team for the page and implement it.

Create Witsdom Page

Create a Page for showing a single witsdom and its content

feat(next): create categories page and route

feat(next): create photostory page and route

Add Material UI Base Code and Theme Settings

Create PhotoStory Page

Add Page for showing individual PhotoStory

Use GitHub Action Artifacts to store node-modules

Is your feature request related to a problem? Please describe.
Installation of node modules for each build is a redundant process as packages are modified very rarely. It is a consumption of time and resources which can be avoided.

Describe the solution you'd like
The use of GitHub Action Artifacts will allow for node modules to be cached across builds. Its validity can be matched and confirmed with the use of the yarn lock file.
Artefacts provide 2 GB storage which is more than enough to store all the node modules and even a few builds.

Setup Docusaurus for documentation

Inititalize and setup documentation for code using JSDoc.

Article Cards and Stack

• Add an optional title to Card Stack.
• Showcase only the secondary categories
• Reduce the font size of the Title and increase the number of characters before adding '...'
• Instead of minutes, show only mins
• Show only the first name of the author (Add a check for Team MM author)
• For article description, keep the word limit to 150 characters (roughly 3 lines)
• #86

---

Update the grid settings to incorporate the following changes.

• For desktop view, maintain the position of 3 cards in a row.
• In the case of either 1 or 2 articles, maintain the position of articles nevertheless.
• For mobile view, the width of the article should fill the entire width of the device.

feat(next): create subcategories page and route

feat(next): create contact page and route

Optimize Template of React App

Add header, footer, and topbar in Template, so that they don't have to be included on every page

Create the UI for category content

1. Create only the UI for the Category page.
2. Create separate sub navigation bar for all different categories (only UI)
3. Create carousel of posts (static) for now

Create About Page

Add About Page that shows

• something about MM
• current Team and all previous Teams

Placeholder files for content

Create a placeholder directory in assets containing different files for different pages.

feat(next): create guide page and route

Article page

• Fix the Article Card Stack bug. (don't show the component if no articles available)
• Change the size of the article cover to align with the content container.
• Shift the table of content and reactions to the top of the column.
• Fix article content bugs. (Edit: Issue #89 )
• Fix the sharing and bookmarking features.
• #174

feat(next): create policy page and route

Create a custom Image element

Create a custom image element with the following features:

• Full Screen on click
• Caption on hover
• Support for image attribution in full-screen mode
• Overlay MM logo where needed
• Prevent copying of images

Also, Refactor all image elements across the project to use this custom element.

Update browserslist in package.json

Warning Message:

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

Create Gallery Page

Add a page for showcasing images in that particular gallery

Create Article Page

1. Create the page with all necessary components
2. Create Comments Separate component with all the logic add comments and view all comments (store in local state)
3. Create Reactions component with all logic (filled icon when clicked, normal when not clicked)
4. Table of Contents component, should navigate to the part when clicked

Home Page Updates

• Featured Articles Component:

• Reduce the font size of Authors

• Add a comma between the authors

• Showcase only the first name of the authors

• For article time, show 'mins' instead of minutes

• Show categories for each article

• Add a clock icon for article read time.

• Increase the size of 'squiggles' on the hero section

---

• Remove Student Pulse and Events.
• Shift Youtube videos from a grid to a carousel
• Show only 6 Instagram posts.
• Add Links to trending items.
• Remove archives from Footer.

Prepare Onboarding Screen

Create Onboarding Screens with all Stages.

Shift content formatting to markdown

Is your feature request related to a problem? Please describe.
The current content formatting style requires a lot of custom scripting, is prone to many errors, and is highly inefficient.

Describe the solution you'd like
Use of markdown for paragraph and content styling will allow for the use of available packages instead of a custom script.
Markdown can handle the following for our use case:

• Bold, Italic, Underline
• List (Ordered or Unordered)
• Tables
• Links

Describe alternatives you've considered
An alternative consideration is to use HTML tag-based formatting as before but it can limit functionality outside of web-based platforms.

Add animations

1. Discuss with the designers for possible addition of animations.
2. Depending upon the use case, implement it with with a specific library.

Create Portfolio Page

Add Page for showcasing articles, designs, and photographs by authors, designers, and photographers respectively

Create Marginal Components

1. Create Header Component
2. Create Footer Components

Add Homepage Components

Add Components that will go on the Homepage of the Site

• Featured Articles
• ArticleCard
• Pulse
• Trending

Category and SubCateogory Pages

Category

1. Align the Article Carousel with the container at the start.
2. For a subcategory display, consider the following cases

• if a total of 4 articles of the particular sub-category are available, show it as per the design.
• if 3 articles are available, show the one big article and the other 2 regular article cards and maintain the positions in the stack.
• if either 2 or 1 article is available, just show the big card.

Sub Category

1. Fix the alignment issue of the first row on the page.
2. Fetch and show a new set of articles on page change.

Create Feedback Page

Page for collecting Feedback from users.. It should have

• a form for collecting user input
• contact details of MM EB

Create Portfolio page (for Technical Team)

Portfolio page of Tech Team, for Tech team and by Tech Team ... Full Democracy.....

#Hail_Github

Assign Yourself if u dare to take this quest....

Create Guide Page

Guide Page shows some static info about current ongoing session like

• clubs
• hall info
• health and essentials info
• and communication directory

feat(next): create about page and route

Create Expression Page

Add components for expression page

• witsdom
• photostory
• gallery
• podcast

Add logic wherever possible

Create Podcast Page

Add Page for showing Podcasts

Create Mobile NavBar and Table of Contents Bar in Article Page

Add Navbar for mobile view
Add a mechanism to pull out the table of contents div

About, Guide, Contact Us

1. About, Guide pages aren't functional due to some bug. Fix it. (Most likely the article card stack issue)
2. Update content on the contact page and shift to a css grid-based system.
3. Add error handling for the Send us a message section.
4. Fix any other possible About and Guide us section bugs.

Create Search Bar Components and Search Page

Add search bar component

• with animation for growing full size
• autocomplete keywords as typing
• and provision for marking some words as trending in autocomplete list
• show some commonly searched words

Add Page for showing search result

• with pagination
• logic for state management in this page and whole search process

Footer links

1. Generate a Sitemap (a dynamic one that takes into consideration all articles.)
2. Generate Robots.txt file as well ()
3. Add Privacy Policy and Terms of use and links to them.
4. FIxate on whether to have a subscribe button or not and implement accordingly.
5. Monday Morning logo should redirect to home page.
6. Add links to all social media icons.

Repository setup.

• Setup the repository template using an appropriate template
• Update the branch name from master to main.
• Add repo description, tags, links, etc.
• Add main branch protection rules.
• Add Issue and PR templates.

Write Common Components

Write the code for components that are common on every page or are being used frequently e.g. Header, Footer, Post (Article) Card, etc.

Setup the GitHub Workflows

• Update the deployment workflows with necessary changes
• Remove the lint.yml workflow and use something similar to project-guava
• Add the codeql-analysis workflow
• [ ]

Create Calendar Component

Create Calendar Component for Home Page and Calendar Page

feat(next): create home page and route

feat(next): create portfolio page and route

UglifyJs does not support ES6 syntax

Describe the bug
The UglifyJs plugin for webpack does not support ES6 syntax, particularly the const keyword as seen in PR #78

To Reproduce
Steps to reproduce the behavior:

1. Checkout PR #78
2. Build for production

Additional context
Solution and other information provided in this StackOverflow thread,