Giter VIP home page Giter VIP logo

cloudlord-and-pals's Introduction

HTML5 CSS3 JavaScript

AltSchool Africa Student Profile Dashboard

Open-source stands for being transparent, sharing, and contributing to others’ projects to improve them or to modify them for your own. In any case, the essence of open-source is a large community of contributors. Please help us make this a massive project by contributing. You can also read through this file to learn how to make your contribution count.

GRACIAS




NOTE:

You don’t have to become a lifelong contributor to enjoy participating in open source. Have you ever seen a typo on a website, and wished someone would fix it? On an open source project, you can do just that. Open source helps people feel agency over their lives and how they experience the world, and that in itself is gratifying.



BELOW IS THE LINK TO THE WEBSITE

Cloudlord-and-pals

Getting Started




Steps On How To Contribute

  • Fork the project repository into your github account

  • Click the green Clone button and then copy the HTTPS URL

  • Using Git on your local machine, clone your fork using the URL you just copied i.e git clone THE URL YOU FORKED INTO YOUR ACCOUNT

  • Navigate to your local repository i.e cd Cloudlord-and-pals

  • Add the project repository as the "upstream" remote i.e git remote add upstream https://github.com/Cloudlordd/Cloudlord-and-pals.git.

  • Pull the latest changes from upstream into your local repository i.e git pull upstream main

  • Create and switch to a new branch with your name ( git checkout -b YOURNAME_NAME )

  • Start the working directory with vs code to make changes i.e start code .

  • Make changes in your local repository (Add your profile to studentdata.json)

  • Stage your changes i.e git add -A

  • Commit your changes i.e git commit -m "Added Adeyemi's profile"

  • Push your changes to your fork i.e git push origin BRANCH_NAME

  • Goto github,reload your page to begin pull request. Click on compare and pull button

  • Scroll down to click COMPARE AND PULL button to create a pull request

  • Check if all the requests pass and wait for us to merge into main

  • Thank you for contributing and making this project bigger, You are forever in our heart



Features

Below are the listed features implemented

Uploading of profile

Search functionally =>. i.e you can search with one of the followings: Student ID, name and circle number

Button for different tracks => When a particular track button is clicked, it displays all the students in that track.

Read More On a Student => Clicking the readmore button on a student's card automatically gives full information about them which then leads to the next feature

Student's Dashboard => On the student's dashboard, you can click on different tabs that direct to a section where certain information can be found






Future Features

Below are the upcoming features

Adding a spinner/loader

Display an error page when a student is not found.

Display a welcome alert box when a user is about to open a dashboard

And More...

Please note this is an opensource project, incase you think of any feature, please feel free to share.





Creates this

USE THE BELOW TEMPLATE TO ADD YOUR PROFILE IN studentdata.json file

{
    "id":0,
    "stuId":,
    "name":"",
    "track":"",
    "circle":,
    "img":"https://avatars.githubusercontent.com/u/62425852?s=400&u=157c27b3c52cfcadb6c2c5e8513b7ad897e7fc5a&v=4",

    "description":{
                "intro":"",
                "introdetails":""
            },

    "socialmedia":{
                "linkedin":"https://www.linkedin.com/in/adeyemi-buhari-opeyemi-3aa4781b5/",
                "github":"https://github.com/buhari44",
                "twitter":"https://twitter.com/Cloud_Lordd",
                "portfolio":"",
                "slackHandle":"cloudlord"
             },

    "experience":{
                "first":"FrontEnd Engineer Intern @TIIDELAB",
                "second":"Program Manager @Novustack",
                "third":""
             },

    "project":{
                "first":{
                    "projectname":"FORBES",
                    "projectdescription":"A platform that was built on forbes api,it display and give extensive informations on current richest folks in the world",
                    "projectlink":"https://afrikaforbes.netlify.app/"
                },
                "second":{
                    "projectname":"Box-Monie",
                    "projectdescription":"A financial platform that allow users to contibute and take turns by creating cohort that contain certain number of user.Still in progress.",
                    "projectlink":"http://boxmonie.com/"
                },

                "third":{

                    "projectname":"The-Life-Changer",
                    "projectdescription":"The life changer is a platform where 2021 Jamb Applicants can find Questions and Answers to the Life Changer Novel.",
                    "projectlink":"https://savethenextjambites.netlify.app/"
                }
             }
        }

cloudlord-and-pals's People

Contributors

abitsalihu avatar achele avatar babboe1 avatar buhari44 avatar bukola-testimony avatar christophermorin avatar dalu46 avatar ejirolaureld avatar jamilu-jibrilla avatar jideotetic avatar jizzyjay avatar joseph-alagi-okebe avatar lhorla avatar lydia02 avatar marian1200 avatar marvy-e avatar midevictor avatar muizzbakar avatar olupel avatar onahanthony avatar philemonnwanne avatar pr41s3 avatar preyeo avatar rcmtcristian avatar stephen498 avatar sunday4me avatar trillionclues avatar tuyojr avatar yvonnedien avatar zubby003 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

aminaadenuga novustack-abetec tiidelab fpb-2-weeks-bootcamp undefine12 bytemonarch adephumie dannyrae preyeo thehydratedpelicancoder ediscode jhhornn lydia02 altschool-hackathon oloto danischolar engrmarkk achele ahnob tuyojr sunday4me lilbobb gbreigns talentlessdeveloper success0452 jamilu-jibrilla midevictor emma-devops1 adekemi02 zeecodes1 abdulrasheedapampa marvy-e thedeola gift-01 cycodez einsteinnnamah tolulopee lufa199x margretedeh dalu46 bsolodzi ze-austin moyinoluwa-10 itemix joseph0819 muizzbakar philemonnwanne anietieakpanumoh bukola-testimony prompromm taslimowolarafe damimesh kingigbozuruike onahanthony psalmzee hi-heavens seyicodes zubby003 teslimxcv adelakin-adewumi yvonnedien udofa18 litobalolu orung pscon joseph-alagi-okebe misturaht pr41s3 fahd-abdulrazzaq code-ebullient babboe1 kossiso violacordis quriouskat oat-mea ejirolaureld preeaaccher matthewtarfa mchenryspagg josephokpala temitopeagbaje kalonoluwanifemi j-gloria olupel masete olatech0411 rcmtcristian marian1200 orluchy jwardoin tylerp99 oyinda98 jizzyjay rakicodes favex092 sarahligbe williamwebs kritikajain6104 stephen498 oluchiedeh

cloudlord-and-pals's Issues

Resize Pop Up Menu layout

Problem statement

  • Pop up menu too big when the go-back button is clicked
  • Make "Yes / No " option look like a button
  • Add green and red background to "No / Yes" button respectively

image

possible solution

  • Add max-width to pop up lay out

Transition Effect On Hover

Problem statement

  • add transition effects to tiles on hover
    image

possible solution

  • add transform scale on hover to the buttons

Search bar result not in sync with filter buttons

Problem statement

User should be able to do the following in the dash board page;

  • when any of the filter button is clicked , and then a search is made, search result should only include filtered options

OR

  • when search is made and result is returned, and if any of the filter button is then clicked, search result should be filtered and not the whole data .

Filter Buttons

image

Search bar

image

results

image

Button doesn't point to any page

When a user clicks on the "dashboard" on the dashboard homepage, the "Go back" button on the dashboard page doesn't point to any page.
Screenshot 2022-08-15 at 09 01 54

Bug: filter result is broken

Problem Statement

  • on members home page, when any of the filter button is clicked, the "Read more" button on the flip card results point to a different profile dash board from the one clicked

Bug instance

  • Click frontend filter
    image

  • result
    image

  • hover on second flip card and "click Read More.."
    image

  • outcome
    image

  • expected result
    image

Transition Effect On Hover

Problem statement

  • add transition effects to social media icons on hover, located at the footer of home page and members page

image

Possible solution

  • transform scale(1.2), transition timing 0.5s

see issue #119 for more details

Toggle Menu Buttom

Problem statement

Change toggle menu button from hamburger-menu to close-menu button when clicked and vice-versa
image

Correct Overstretched Image

Problem Statement

  • Display Picture looks overstretched

image

possible solution

  • Hint: to get a perfect circle, Height and Width has to be the same
  • Work with (20vh)

Read More Button Points To Wrong Dashboard

Problem Statement

  • when read more button is clicked , it opens the dashboard of the previous profile in line

image
when read more (blue arrow) is clicked , it goes to the dash board of previous profile ( red arrow)

Pointer on Hover state

Problem Statement

  • add pointer cursor when hovering menu button located on the dash board page

image

Search Bar Not Working

Problem Statement

  • Search bar not functioning

Challenge

  • User should be able to search by Name, id, Circle and get result

Content best practices is not Optimized

Screenshot 2022-08-16 000553
I analyzed the website using lighthouse and I found out that the SEO for the website is not optimized because the website lacked meta document.
I can fix this issue, should I go ahead and fix it.

Project Title Text overflow

Problem Statement

  • Project title overflows when text is too long
    image

Possible Solution

image

  • remove Height and width
  • set padding to 1rem
  • set max-width to 300px

Content Overflow On Flip Card

Problem Statememnt

On the member's page, flip card content overflows when the introduction text is too long
image

possible solution

  • set tex overflow to scroll on the flip card
    or
  • set text-overflow to ellipsis

Profile Page not responsive on mobile

This entire Project in itself is a very nice Idea,
I can help fix this part of the page and make it responsive on mobile, such that the sidebar is going to be displayed as an Overlay when the menu button is clicked
If you are okay with me helping, all you have to do is assign me to the task to ensure I get a notification and I will get it done as soon as I can

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.