Made with HTML, SCSS, TypeScript, ReactJS, CSS Modules
Bootstrapped with Vite
🖼 Screenshots • ℹ️ About • ⚙️ Tools • 🔨 How to Build Project • 📁 File Structure
📦 NPM Packages worth mentioning • 💡 Details • 🔗 Useful resources • 👤 Author
I participated in a Pinapple Practice project, вот такие пироги. You can read more about it on their official website: https://pnpl.site/ or on their LinkedIn page: https://www.linkedin.com/company/pineapple-practice/. Keep in mind, everything is written in Russian.
The project idea is to show stats derived from polls. Polls were stored in Google Sheets. I exported the polls in .csv format, then turned them into JavaScript arrays, removed personal information and saved in the project.
The project had a frontend part and a backend part. Here I publish a cut version of the frontend app that doesn't include personal information and interaction with backend. Reason: I dunno what's gonna happen with the backend, it might stop working at any moment.
- HTML5
- CSS
- CSS Modules
- SASS/SCSS
- TypeScript
- ReactJS
- Github Pages
| Command | Description |
|---|---|
npm i |
First things first, install all required packages |
npm run dev |
Run the app in development mode |
npm run build |
Build the app |
npm run preview |
Run the app in production mode |
npm run lint |
Check compliance with Eslint rules |
npm run prettier-check |
Check compliance with Prettier rules |
npm run prettier-fix |
Fix code formatting in source files so they comply with Prettier |
├── 📁 .github
| └── 📁 workflows
| └── 📝 main.yaml CI/CD instructions for Github Actions
|
├── 📁 docs Additional information, documentation
│ └── 📁 results Screenshots of how the application works after being fully developed
|
├── 📁 src Source files needed for application development
│ ├── 📁 assets Static assets: images, icons, favicons
| |
│ ├── 📁 components React components
| | └── 📁 ComponentName
| | ├── 📝 index.tsx Component logic
| | ├── 📝 index.module.scss (optional) Component styles
| | ├── 📝 index.types.tsx (optional) Component types
| | ├── 📝 hooks.tsx (optional) Custom hooks used only in this component
| | ├── 📝 utils.ts (optional) Custom utility functions used only in this component
| | └── 📝 other files Other additional files
| |
│ ├── 📁 data Code responsible for providing data for the graphs
| |
│ ├── 📁 hooks Custom React hooks
| |
│ ├── 📁 pages React components for pages
| | └── 📁 PageName
| | ├── 📝 index.tsx Page logic
| | ├── 📝 index.module.scss Page styles
| | ├── 📝 index.types.tsx (optional) Page types
| | └── 📝 _other files_ Other additional files
| |
│ ├── 📁 shared Shared types
| |
│ ├── 📁 utils Utility functions
| |
│ ├── 📝 globals.scss Global styles
│ ├── 📝 index.html Root HTML file
│ ├── 📝 index.tsx Entry point for the module bundler
│ └── 📝 vite-end.d.ts Some Typescript stuff for Vite
|
├── 📝 .eslintrc.cjs ESLint configuration file
├── 📝 .gitignore Instructions for Git about what files to ignore
├── 📝 .prettierrc.json Prettier configuration file
├── 📝 LICENSE MIT License. Basically you can do whatever you want with the code
├── 📝 package-lock.json Keeps track of the exact version of every package that is installed
├── 📝 package.json Various metadata relevant to the project, scripts, dependencies
├── 📝 README.md Project description
├── 📝 tsconfig.json TypeScript configuration file
├── 📝 tsconfig.node.json TypeScript configuration file for Vite
└── 📝 vite.config.js Vite configuration fileclsx |
For conditional lists of CSS classes |
sass |
Mainly for using nesting, mixins, static variables in CSS |
At first, tried to use MaterialUI, but quickly got sick of it. The project appeared to be quite simple, it had custom design made by me... so it was logical to make everything custom.
Also used a library that generates charts, it worked just fine, but the charts looked very, very bad, so I remade them from scratch.
n/a
- Frontend Mentor - @GrbnvAlex
- Telegram - @Arlagonix
- Github - @arlagonix