academic training NextJS from scratch

[ErnestaP]

Setup the next js project on git: https://github.com/cern-sis/cern-academic-training-next-js

[ErnestaP]

Plan:

• Have backend running (locally, form cern academic training repo ), or use the API ✅ Integrate Prisma for ORM
• Create pages: ✅ About page: statically generated (getStaticProps) ✅ Home page: SSR (getServerSideProps) ✅ Lectures search: SSR (getServerSideProps) ✅ Lecture (dynamic route): SSR (getServerSideProps)
• Style: antd (keep the same appearance as it is)
  • config for next.js

  • create components

• Testing:
  • Storybook
  • Jest

for ideas: https://raygun.com/blog/javascript-unit-testing-frameworks/

[ErnestaP]

I managed to adapt the styles for the header. There are small differences- the font looks bigger on the original CAT. However, none of the buttons and neither search field doesn't work.

[ErnestaP]

The original intention was to continue using the same style files as the CAT project is currently using. The React app project and NextJS, however, do not load styles in the same way. Because style classes are grouped for various cases and components, it is very challenging to investigate each class separately. As a result, it becomes difficult to keep track of each of them.

Due to the simplicity of the library, it has been decided to switch to using styled-components. We can style each component individually with styled-components, which makes it simpler to comprehend how each component is styled.

The new strategy is to replace all CSS classes that are currently being read from files with the built-in styling of styled-components.

[ErnestaP]

Started the lecture page:

[ErnestaP]

more improvements on the lecture page:

1. Video
2. Fixed overlaying/duplicated components
3. Header is visibility

[ErnestaP]

Got rid off App.css file