devabdotolba / theday Goto Github PK

View Code? Open in Web Editor NEW

17.0 1.0 3.0 3.77 MB

Home Page: https://the-day.vercel.app

JavaScript 2.18% CSS 1.10% TypeScript 96.73%

aast college computer-science drive

theday's Introduction

TheDay

Made with , by AASTMT aswan CS"2110 students

All content and materials in the journey of a computer science student.

Features

Displaying all semesters with their courses
- Every semester has up to 6 courses, all of which are displayed in 2 conditions: on computers and wide screens, the abbreviations of every course are shown. On phones, the whole course name is displayed.
- Hovering over any item on the PC screen shows you the full name.
- Choosing any course will prompt the website to ask if this is your assigned semester! If you choose "YES," the next time you enter, you will find that this semester is pinned at the top of the website.
Search in all courses
- Searching using advanced matching techniques.
Every course has its own page
- Easy UI with modern styling and a more optimized search for all platforms.
- The search is different from the main-page search and much more amazingly fast!
- There are 3 sections for every course, which are: Material, Schedule, and Previous Exams.
- Every page in the courses has many sections in the Material section. For example, in the computer architecture course, we have sections, whitenning, lectures, online sections, and online lectures. Each section has 4 main items:
  - Title
  - Go-to drive button (which leads to the drive folder from which the data came)
  - Items themselves
  - Horzintal scroll bar
- Every item has 4 main functionalities:
  - On hover, display the whole name.
  - On click, open the file.
  - Show the thumbnail of the file.
  - The width increases depending on the file's main size in KBs.

How to install

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

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!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

required dependencies :

npm install @emotion/react @emotion/styled @mui/icons-material @mui/material @next/font @vercel/analytics eslint eslint-config-next googleapis next next-pwa react react-dom react-draggable

theday's People

Stargazers

Watchers

Forkers

nightmare489 meshaal-a atharvachiplunkar12

theday's Issues

Search in subjects page should not be visible with no data

If there is not data in the subject or any material, then there is no meaning for the search to be visible!
like this :

Course Selection and Management

As a student, I want to select courses from the 8 semesters, so that I can access relevant course materials and documents. After selecting my courses, I’d like to view my chosen courses on a dedicated page, with the flexibility to make changes if needed.

this is just a scratch, don't consider this

Link goto drive page

An icon in which makes you go to the main drive page that the website is referencing

Links open direct Links.

If the name has a link. On click open that link not to concate with the drive URL

build up on #65 setting links. now links are showen in the names in the search

Building up on the issue #65 now the links are working but the names are not filtred from the search results

In which only the names should be filtred like been done in :

Typo

"Yasser" is written everywhere in the website. the correct name is "Yaser" please change it fast as it's urgent.

Back to close search

The back button on the phone while on search closes the search, not going back to the previous page

Loading bar 👉👈

Add a loading bar at the top of the app to look professional

Current semester is not showen for phone screen

sharable link to the header

Make a shareable link to the header of every spread folder like :
https://the-day.vercel.app/subjects/SE#PreviousExams
which that scrolls the visitor to the required section immediately

Overflow phone screen

In the main page using phone screen, when opening multiple accordions it starts to fall down and down more further until it becomes under the footer z-index

Responsivne has issues

Dynamic for real inhertiance

Now all data are on the drive with all of it's folders. but! on mongo cluster for the account [email protected]. has all the colleges and classes id and name for it to show dynamic name for each of them

If offline nothing overrides the chrome offline page

Make the offline page already in the top level componants and waiting for the confirmation from a child componant

TypeScript

Gonna use TS for the whole project for some reasons :"

Search in files

Search in files in every folder you select from every semesters

Main page add two views

Make the main page not in chips only. add another list view
this is an imagination of list view style

USE theme palette in SX

this is how you should use sx coloring so it fits the theme palette

import { useTheme } from '@mui/material/styles';

// Inside your component
function AnotherComponent() {
  const theme = useTheme();

  return (
    <div
      sx={{
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.secondary.main,
      }}
    >
      {/* Content of your component */}
    </div>
  );
}