5. Maintenance
6. Screenshots
7. Learn More
PET is a scholarship available in a lot of universities in Brazil. Their main goal is to provide an opportunity for students to develop themselves by studying topics of their interests and share their learnings with the community. The group PET Computação UFRGS is a group composed by graduate students of Computer Science and Engineering.
The group is constantly changing and adapating. This means that web development is not always a topic of interest of the group. So, for this reason, is important to make the website maintenance as easy as possible. However, it is crutial to keep it easily customizable, because, after all, the group is formed by tech students and they must have a space to exercise their knowledge and creativity if they desire.
With this in mind, this project was made. The intention is to make a website that can be updated only by editing a javascript object but, at the same time, has the possibility to customizations without the need to change all the structure of the project.
If you want to know more about the PET Computação, have a look at their social media (portuguese only)
This is a Next.js project bootstrapped with create-next-app.
After cloning the project, run the installation of node modules:
npm install
# or
yarnNow, you are ready to run the development server:
npm run dev
# or
yarn devThe server will run on http://localhost:3000, so you can open your browser to see the result. The page auto-updates as you edit the file.
This projects has a pretty basic folder structure
public
src
|_ components
|_ customComponents
|_ data
|_ hooks
|_ images
|_ pages
|_ styles
|_ types
|_ viewsContains the favicon.ico, that is the little icon that appears on the tab of the page.
This folder is the core of the project and contains all the info to build the website.
Contains all the components used to build the webpage main structure.
Contains all the custom components used on the project's page.
Contains all the info displayed on screen of the website. The data are divided in three files: footer.ts (links to mail and all social media that appear on the footer); homePage.ts (data of the home page); membersPage.ts (data of the members page); and projects.ts (data about all the projects and guides/courses - this data is partially used on homepage and used to build the project page).
Contains useful functions.
Contains the assets that are saved on the project.
Contains the pages of the project. With Next.js, each file defines a url of the website based on the name of the file. So for this project, there is the home page (index.tsx) and the members page (petianes.tsx).
Besides that, we have the pages with the path projects/project-name. This pages are built dynamically, with the info href from projects objects, available in data/projects.ts.
Contains styles used through out the website. The file theme.ts defines the colors used and the devices.ts file defines some sizes for devices.
Contains some types for general use.
Contains the three main views of the project. A view is a whole page, built with the components from components page.
To add, remove or update a member, access src/data/membersPage.ts.
This file contains an object like the following:
export const membersPage: IMemberPage = {
title: 'Nossos petianes',
members: [
// ... members
{
name: 'Member',
imgUrl: 'url-to-member-image',
course: 'their course or if they are the tutor',
semester: '20XX/X',
interest: 'what this member likes?',
},
// ... more members
],
}If you want to add a new member, just add another member object and add the necessary info. To edit or remove a member, find them and make the changes or delete the object.
In this object you can edit the page title too!
To add, remove or update a project, access src/data/projects.ts.
At the end of this file there is an array like the following:
export const projects: (ProjectType | CourseType)[] = [
hidraProject,
dinoProject,
//... more projects and courses
sdrCourse,
castorProject,
]Each of these items is an object of a project or course, that is defined above this list.
So, to add a new project or course, create an object with the correct type (ProjectType or CourseType) and add the necessary info. After that, you can add this new object at the end of the array.
To edit a project or course, just find the item you need and update the info. To remove a project or course, find the item, delete it and remove it from the array.
Each project can have one custom component added to them. To do that, first, you have to create your custom component in the folder customComponents. Then add the name of the component in the project object (data/projects.ts) in the prop customContent.
Home page
Project page
Members page
To learn more about Next.js, take a look at the following resources:
- Next.js documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
To learn more about React, you can check out the React Documentation:
If you want to learn more about Typescript, you can take a look at these resources:
Finally, if you want to know more about Styled Components, check their documentation: