An app, where you can find some driving tips and take a quiz to check your driving knowledge.
You can register and login to your own account. After login, you can see sections like: "Home", where you can check the weekly tip, and popular/newest tips added to the site. When you click every single tip, you go to the tip's page. You can take the quiz there, to gain more points. You can also ask questions about the driving tip. Section "Forum" lets you check all the questions from all the users, you can filter the questions based on the tips titles or your own questions. In the header there are your account's username, points you've gained and a link to edit your profile. In the "Profile", you can change your username, add a photo from your computer, add a description and choose a gender.
Login: admin@admin.pl Password: admin@admin.pl
After login in to the admin account, the header seactions are different than in user panel. Here you can use a "Tips" section, where you can edit the tips on a page or create new ones. In the section "Users" you can check all the registered users with the register date, email, username and whole profile data. Section "Asks" is used to answer questions asked by users. You can filter the questions based on the answered/not answered ones. You can also edit the answers already given or delete the questions.
DRV Driving Experience - live preview
| Tool | Description |
|---|---|
| React | A JavaScript library for creating user interfaces. |
| React Router Dom | DOM bindings for React Router. |
| SASS | A preprocessor scripting language that is interpreted or compiled into CSS. |
| Node Sass | A library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. |
| Firebase | Tools from Google for building app infrastructure, improving app quality and growing your business like Realtime Database, Cloud Firestore, Storage, Cloud Messaging or Authentication. |
| React Tooltip | Tooltips display informative text when users hover over, focus on, or tap an element. |
| React Router Transition | Painless transitions for React Router, powered by React Motion. |
| React Responsive Carousel | Powerful, lightweight and fully customizable carousel component for React apps. |
| Read More React | A simple npm component for react that "intelligently" truncates text at the appropriate point given a min, an ideal, and max text length. |
| React Share | Social media share buttons and share counts for React. |
| React Slidedown | React component which uses CSS to animate a child from its current height to height: auto when mounting/updating/unmounting. |
node.js is required to use npm.
git clone https://github.com/Cenora6/DRV-Driving-Experience.gitto clone the repositorynpm installto install all dependenciesnpm startandhttp://localhost:3000/in the browser to preview the app