- Upload your excel file then select the fields. You can review the files with student review button, that will appear in the app bar.
- The App gives you a default design with first student in the file.
- You can modify page size, color, typesetting and page position.
- When you click the preview mode it shows pdf mode. refresh the page to see correct preview.
- Then save and print your modified page/card for all students.
You can install the packages with this command: npm i
You can serve and see the result in your local environment with this command: npm start
-
Setup = create-react-app and integration with material UI
-
I used LocalStorage for storing excel data and public API for random student profile photo generator.
Best way to storing data is using RestAPI and NodeJS or tool like Firebase but i am not comfortable with back-end languages, that's because i didn't use and i found a easy and fast way to do this challenge. If there were real-world app, I wouldn't use localStorage, it has security problems. i rather use NodeJS.
-
I uploaded and rendered excel file in the app
Once the excel file uploaded I am able to get excel data from localStorage with JSON
-
I used ContextApi for the state management
ContextAPI is good for small apps and easy to use. I created a few customized hooks for getting data from localStorage, It was very exciting.
-
Manipulation on the PDF
I used a library called
@react-pdf/renderer. With this, I designed a structure that works between HTML and PDF File