SCInTIFIC2k23-12 is a web application designed to facilitate user engagement for scientific events. Built primarily with JavaScript and the React framework, it features an interactive landing page and multiple components that provide users with crucial information regarding participation, judging criteria, and event timelines.
- Getting Started
- Available Scripts
- Project Structure
- Key Features
- Dependencies
- Usage
- Contributing
- License
- Release Notes
To get started with this application, clone the repository and run npm commands as outlined below.
-
Clone the repository:
git clone https://github.com/yourusername/SCInTIFIC2k23-12.git cd SCInTIFIC2k23-12 -
Install dependencies:
npm install
In the project directory, you can run:
Runs the app in development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for best performance.
For more on deployment options, refer to the documentation here.
Note: This is a one-way operation! Once you eject, you can't go back!
If you're not satisfied with configuration choices, this command will remove the single build dependency from your project. It copies all configuration files, giving you full control over them while leaving other commands intact.
You do not need to use eject unless necessary; curated features are suitable for most deployments.
SCInTIFIC2k23-12/
├── .gitignore
├── README.md
├── deploy.sh
├── package-lock.json
├── package.json
├── postcss.config.js
├── public/
│ ├── assets/
│ │ ├── howtoparticipate.png
│ │ ├── judging/
│ │ ├── novelty.png
│ │ ├── practicality.png
│ │ ├── presentation.png
│ │ └── prototype.png
│ ├── favicon.ico
│ ├── index.html
│ └── logo.svg
└── src/
├─ App.css
├─ App.js
├─ Components/
├─ Footer.jsx
├─ JudgingCriteria.jsx
└─ LandingPage.jsx/
...
-
Landing Page: An engaging starting point that introduces users to event details through visually rich components.
-
Navigation Bar: Facilitates easy access to various sections of the application using React Router or similar libraries (implemented in
Navbar.jsx). -
Judging Criteria: Clearly outlines different metrics used during evaluations (contained within
JudgingCriteria.jsx). -
Timeline Component: Displays important dates and milestones related to event phases (implemented via
Timeline.jsx). -
Responsive Design: Utilizes CSS styles along with Tailwind CSS for modern design practices ensuring compatibility across devices.
-
Performance Measurement: Implements basic performance monitoring using Web Vitals utility (
reportWebVitals.js), helping optimize load times and overall user experience. -
Interactive Sponsor Cards: Shows sponsors involved in events dynamically through components like
SponsorCard.jsx.
This project utilizes several libraries including:
- React and React-DOM for building UI components.
- TailwindCSS for styling.
- AOS (Animate On Scroll) library for scroll animations.
Refer to package.json for a complete list of dependencies including testing libraries like @testing-library/react.
To start measuring performance in your app, simply pass a function to log results or send them to an analytics endpoint as specified within index.js.
If you'd like to contribute to this project, please fork the repository and submit a pull request detailing your changes.
This project does not have a specified license at this time.
- Implementation of responsive navbar component.
- Enhanced judging criteria display component.
This version introduces critical new functionalities aimed at improving user navigation and interaction experience while refining existing features related to event details.