Developing an admin platform for SEF-fellowship program

Development
1

SEF fellowship is a program where SEF rewards people who have done something for global education via SEF. The initial idea was to create a platform where an admin can log in and create a certificate to be given to the SEF fellow.
Currently, I’m working on this task and to give a technical review, My plan is to use a spring boot API with a MySQL database as the backend and use react admin dashboard to manage the CRUD operations.

1 Like
2

That’s great! We can go without a certificate as we discussed on the meeting. Let’s display it on a nicely designed webpage. Also, let’s make this dashboard generic. Which means whatever the functionalities like this fellowship program we come up in the future should be achieved using the same application.

1 Like
3

@Gravewalker This is what I said to you earlier. : https://ant.design/
It is a react UI library with a set of high-quality React components, one of the best React UI libraries for admin dashboards.
Here is a preview: https://preview.pro.ant.design/dashboard/analysis

I you like I can help you to initiate a project this weekend. :smiley:

1 Like
5

Sure! It would be great if you can give me a hand on initiating the project. Thank you!

1 Like
6

@jaye, This is the current status of the project.
I have developed a simple front end crud application where we can create new sef fellow and delete the created ones.

Peek 2020-04-01 23-40
Peek 2020-04-01 23-40726×370 1.66 MB

This is file structure of the front end application.

sef-fellowship-dashboard/
├── src/
│        ├── App.css
│        ├── App.js
│        ├── App.test.js
│        ├── component
│        │   ├── AddCertificateComponent.js
│        │   └── ListCertificatesComponent.js
│        ├── index.css
│        ├── index.js
│        ├── logo.png
│        ├── logo.svg
│        ├── server
│        │   └── CertificateService.js
│        ├── serviceWorker.js
│        └── setupTests.js
├── public/
        ├── favicon.ico
        ├── index.html
        ├── logo192.png
        ├── logo512.png
        ├── manifest.json
        └── robots.txt

This is the database table that stores the data

+------------+--------------+------+-----+---------+-------+
| Field      | Type         | Null | Key | Default | Extra |
+------------+--------------+------+-----+---------+-------+
| id         | varchar(50)  | NO   | PRI | NULL    |       |
| name       | varchar(100) | NO   |     | NULL    |       |
| createdAt  | int          | YES  |     | NULL    |       |
| status     | varchar(100) | NO   |     | NULL    |       |
| created_at | bigint       | NO   |     | NULL    |       |
+------------+--------------+------+-----+---------+-------+
5 rows in set (0.02 sec)

Now what should I do to uplift the project from this state?

1 Like
7

Well done @Gravewalker!

this is regarding the DB.

  1. Why there are 2 columns to store created time? Also we can use Datetime/ Timestamp / bigint data types.
  2. Since we do not have multiple status for a certificate we can remove the status column.
1 Like
8

Thank you! I will do necessary amends to the code.

9

image
image1366×664 79 KB

@akshika47 This is the certificate that I designed. Any thoughts?

10

This is a great start @Gravewalker! can we change the text as follows: https://www.canva.com/design/DADovkEwdLg/share/preview?token=vsoRCFNU-x0uB-hQi0fQQA&role=EDITOR&utm_content=DADovkEwdLg&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton

Also, with the image can we get it to have more of an ‘award’ feel? the imagery right now makes it look like a generic webpage.

2 Likes
11

Okay. Sure! On it. :grinning: :grinning: :grinning:

12

@Minuri_Adasuriya How about now?

image
image1366×664 125 KB

1 Like
13

Cool! +1 from me.

It would be nice if we can get the a4 ratio (1:1.4).

14

Actually this is dynamic. It changes with the screen size.
This is the mobile view.

image
image288×576 51.1 KB

1 Like
15

http://localhost:9000/fellowship/?id=5
This is how the link comes.

16

This looks great @Gravewalker

1 Like
17

I implemented the API to create, list, delete certificates.
1 Like
18

These are the stuff that we talked on the first code reveiw,

  • Use audit model instead of using a specific column for the date attribute.
  • Change the 500 response to Bad request response on the Id not found exception on delete certificate endpoint.
  • Add java doc comments on endpoint methods.
  • Implement the same functions with a new architecture using Controller, Service, DAO and, Repository.
2 Likes
19

Updated the get certificates endpoint to return a page as the payload.

20

Hi @Gravewalker is this done now? :slight_smile: let me know if we can start using this feature. It will be an awesome project to close off and let our followers know about and start issuing the digital certificates to our volunteer speakers and supporters.

21

We had a discussion on this project in our tech team standup. We already have the backend developed in the same place where we have our academix backend (sef-core). Plan is to let you guys give the functionality to create certificates in the same dashboard. We were all fixated on the other projects and couldn’t look into this past few weeks.
We defined the next steps on this project in our last meeting you can find it here,

It might take a bit of time only because we are simultaneously working on the scholarx platform but I think we can deliver this within a two-week span.

1 Like