100daysofcloud / 100daysofcloudfrontend Goto Github PK

View Code? Open in Web Editor NEW

11.0 11.0 10.0 1.12 MB

JavaScript 99.33% CSS 0.67%

100daysofcloudfrontend's Introduction

100daysofcloudfrontend's People

Contributors

Stargazers

Watchers

Forkers

acostan13 bruck1701 andreacavagna01 rishabkumar7 allthingsazure emreysrc sameersyed226 muraliv21

100daysofcloudfrontend's Issues

ProfileBadge needs to have an option to align the content of the badge to the left.

Version Information

What is the expected behavior?

the ProfileBadge should have an option to justify the content to the left as well, so when we add different users together in a table, their images will be aligned.

What is the actual behavior?

Now, the ProfileBadge has a hard coded 'justify-center' to the card that holds the user information. In the Journeyers Table, with users with different length of names, the images don't align nicely...

Other notes on how to reproduce the issue?

The grid in front of the image of the table shows how the avatars of the users are misaligned!

Any possible solutions?

Adding an option to the ProfileBadge to align the images to the left fixes the issue on the Journeyers page.

Can you identify the location in the source code where the problem exists?

yes, line 38 of ProfileBadge.js

If the bug is confirmed, would you be willing to submit a PR?

Yes, the solution is ready. As soon as the issue is recognized, I'll submit the PR.

Cloud Journeyers Page

A sortable list of each Journeyer that showcases their journey's progress, as well as GitHub, Twitter and LinkedIn profile links.

Home Page

I am going to do rough thumbnail of this page and itss components here on Figma:
https://www.figma.com/file/hrmKJvNkBxb0ek3tuBmB3Y/100DaysOfCloud-Pages?node-id=0%3A1

Components

Article Item

What is important to note is images are 16:9.

Popular Tag List

This component is a list of popular tags
The basis of tagging could extend from the Categories and items of 100DaysOfCloud
https://github.com/100DaysOfCloud/100DaysOfCloudIdeas

Profile Page

Profile page that can be reached by clicking on a journeyer's profile badge in any page. Showcases bio, social links, leaderboard/progress statistics and submitted or published articles.

Refactor Journeyers table.

The Journeyers Table had to be remodeled to be more Mobile responsive.
I had to change some of the classes in the table and added some constraints for different screen sizes on styles.css.

Sitemap

Issue	Name	Path	Description
#4	Home	/	The homepage I think can be a feed of both articles and status updates. We can have a tag list on the right-hand side and highlight new or expectational users
#5	Cloud Journeyers	/cloud-journeyers	This will be a list of all participants order by most active
#6	Article	/u/:username/:slug	Articles, for the time being, will have to accepted and published via Pull Requests.
#7	Profile	/u/:username	We can have their Github Cloud Journey Fork be their profile. We'll just code in a redirect to their page. We can keep it simple and just store their github username.
#8	FAQs	/faqs	For the time being, we can just link to the Google Docs FAQs
#9	Rules	/rules	For the time being, we can just link to the Google Docs Rules
#10	Codes Of Conduct	/code-of-conduct	For the time being, we can just link to the Google Docs Codes of Conduct
#11	Tag Articles	/t/:tag	This just listing all related status updates and articles for the given tag
	About Page	/about	Its what you think it might be lol.

Notice that I have scoped some URLs with prefixes eg. "/u", "/t" This is to avoid conflicts where someone's username could be the same as tag or an article slug.

For the Google Docs I have placed them in this Google Folder and its set to be viewable by anyone.
https://drive.google.com/drive/folders/1c5RdNNodK9YJNV0nxGVXVPmC5nuW8T2-?usp=sharing

Leaderboard Page

Related to backend's 100DaysOfCloud/100DaysOfCloudBackend#12 (comment) code snippet. Showcases the leaderboards and the current CloudCoins.

Create utility function to generate N random users for component testing

Reasoning

While the backend APIs are a WIP, we can have a function that easily generates mock data for users in the shape we need to develop the frontend.

Basic functionality

It should return a JSON file that includes a user-specified number of profiles, including links to a profile image and all the data that the regular profile API would return.

What could work

Unsplash for random user images, Mockaroo or casual for data generation. Given that this should be programmatic, casual might work best.

Article Page

Hosting of #100DaysOfCloud published articles written for the website.

Create a Profile badge for app users

The users of the page need a profile badge that shows their picture, name, handle and for the authors of articles, a short bio.

Convert all class component to functional component

The conversion would help with testing and long-term maintainability.

FAQs

Frequently Asked Questions, can potentially be expanded to have a general request form if needed.

Set up CI/CD pipeline to build and deploy the frontend

There is currently no pipeline or deployment of the new frontend. To be able to work on both the front and backend, there needs to be a complete dev environment deployed incorporating both. The pipeline is very similar to the current cicd/codepipeline-dev.template.yaml template in the backend repo.

We should create two separate stacks for frontend and backend, given that all the interactions between the two rely exclusively on REST APIs.

Rename default branch to main

Rules/CoC Page

One-stop shop for #100DaysOfCloud rules and Code of conduct. Just a static page.

100daysofcloud / 100daysofcloudfrontend Goto Github PK

100daysofcloudfrontend's Introduction

The Challenge

How to use this template:

[✍️ Your Name]'s Cloud Journey

Stepping out the door

Walking down the road

Crossing the bridge

Into the bushy, thorny forest

Trekking the dunes

Winding through the canyons

Stumbling through the caves

Resting at the Lagoon

Up into the mountains

Into the sky to touch the cloud!