- App Description
- App Background
- Team Members
- Development Process
- Final Website
- App Technology
- Future Features
- Wrap Up
- License
Hello 👋, my name is Leandro Gamarra. Welcome to my documented process of how I built the club's website. As President of the Computer Science Society Club I led a team of 4 students this past Winter 2022, during the month of January, in building the club's very first official Club Website. In this website you will find everything you need to know about who we are as a club, what we do in terms of workshops and additional resources that will help students succeed in the Computer Science field..
I first came up with the idea of building the club's website during the Fall Semester of 2021. As a club we have plenty of social media sites, but we didn't exactly have a specific place where you would find all the necessary info about the club and who we are. Therefore, I began by asking members of the club if they'd like to join me in building the club's first official website. Plenty signed up. Afterwards, we decided that we would begin development after finals, which would be around December, and so we decided that the first start date would be in January of 2022. We split the development process into 5 parts, which I go into more detail below.
- Leandro Gamarra
- Luis B.
- Annie
- Wingki
-
-
To begin, I began by first polling the club members on what type of features they would like to see on the club's website. After plenty of responses we split all the features into optional and required features. This is what this milestone consists of. Each milestone had a a deadline of one week.
-
- About us Info (this will have relevant contact info/club logo)
- Email mail listing (link to sign up google form and also another link to the remove from mailing list form)
- Upcoming Events/Calendar
- JJAY CS Related resource sections
- Suggestion box for future events
- Social media links
-
- Optional Features
- Dark mode feature
- Internships/helpful links
- Software engineering, CyberSec or other Tech related career paths information (like links to things like roadmaps, or basics for the specific field, and things to be aware of in general)
- Allow user to add/remove themselves from the mailing list (would need an API request probably, maybe Gmail has an API that connects the club’s account and allows this functionality)
-
-
- During this milestone, we began the Figma Design of the website. Of the four members who were on the team, we first decided how many pages we would like on the site. Then, we split the design of each page. Below you'll see two Figma designs. The first is what we called "First Stage", which consisted of a rough sketch of the initial layout of what we wanted the website to look like. The next design, is the "Final Stage", and this is where we finalized all the details of the website.
-
- We decided to split the page into 5 pages: Home page, About page, Events page, Resources page, and Collaborate page. The Home page, includes a summary of all the pages, but with brief descriptions. The About page, goes into more detail about who the club is and what you'd expect from being a part of the club. The Events page consisted of a list of the club's events/workshops for the semester. Next, the Resources page includes resources that we decided would be best suited for club members. Lastly, the Collaborate page consists of ways the club has for students to become Executives and Assistant Executives of the club.
-
-
- During this stage, we finalized all the pages from the First Stage. This consisted of deciding what colors we want each container in the pages to be, descriptions for each of those containers, images we'd like on each page, and links that buttons in each page will take us to, etc...
-
-
- During this milestone, we began the Figma Design of the website. Of the four members who were on the team, we first decided how many pages we would like on the site. Then, we split the design of each page. Below you'll see two Figma designs. The first is what we called "First Stage", which consisted of a rough sketch of the initial layout of what we wanted the website to look like. The next design, is the "Final Stage", and this is where we finalized all the details of the website.
-
- During this milestone we began the fun part, coding (Part 1/2)! Similar to how we split the Figma Design, I thought it would be best to do the same thing for the coding section since we were already familiar with those pages. At first, we begain using Live Share in Visual Studio Code, but we later as a team agreed that it would be best to move over to Github, creating branches and pull requests. Below you'll see what we managed to accomplish during this milstone, for each page.
-
- During this milestone we began the fun part, coding (Part 1/2)! Similar to how we split the Figma Design, I thought it would be best to do the same thing for the coding section since we were already familiar with those pages. At first, we begain using Live Share in Visual Studio Code, but we later as a team agreed that it would be best to move over to Github, creating branches and pull requests. Below you'll see what we managed to accomplish during this milstone, for each page.
-
- During this milstone we continued coding (Part 2/2). Specifically, we went over each page and we began reviewing what needed to change/what we can improve upon. Below you'll see the updated changes that we made as a team.
-
- During this milstone we continued coding (Part 2/2). Specifically, we went over each page and we began reviewing what needed to change/what we can improve upon. Below you'll see the updated changes that we made as a team.
-
- During this milestone we once again reviewd all our new changes and we tried to finalize all small remaining details in each page and we made sure all links on the website work pefectly. Lastly, we also discussed how we were going to host the website. We decided on using Netlify to be the host.
- Let's go!! After 5 long weeks, we managed to finish the website. I'm extremely happy with the final product and I'm happy with my team and how we all came together to build this awesome site.
This website has been built using HTML/CSS and Javascript.
In terms of future features, I'd like to implement some sort of database so, instead of having members doing to a Google Form link to sign up for the Club's mailing list, they can manually input their interest from the website. Furthermore, I'd also like to implement some sort of chatting system where members can chat/discuss with each other. Apart, from that, I'm really happy with how the website has turned out.
To sum up, all that members wanted implement into the club's website has been implemented. The website can serve as a go to source for members/new members to learn about what the club is about and so much more. I had fun leading this team, as it was the first time I've ever led a team throgh a project where we followed common steps of a project Development process. I will definitely try to do this more. I hope you enjoyed my project.
Copyright [2022] [Leandro Gamarra Montero]
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.