From d610eac8b6bd6359d51337bc8895135d047434bf Mon Sep 17 00:00:00 2001 From: ashtilawat23 Date: Mon, 18 Sep 2023 15:33:57 -0400 Subject: [PATCH] added stretch ticket --- tickets/stretchGoals.md | 17 -------------- tickets/stretchTicketNEXTjs.md | 42 ++++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 17 deletions(-) delete mode 100644 tickets/stretchGoals.md create mode 100644 tickets/stretchTicketNEXTjs.md diff --git a/tickets/stretchGoals.md b/tickets/stretchGoals.md deleted file mode 100644 index a599f8018..000000000 --- a/tickets/stretchGoals.md +++ /dev/null @@ -1,17 +0,0 @@ -# Stretch Goals - -These are meant to be completed once you have graduated. They include additional features you can add to this application to challenge yourself and further highlight this project on your resume. - -> For guidance on implementation, post on the Labs Slack channel which goal you want to pursue and specific questions you have about getting started. - -1. Implement authentication using Auth0 - - Auth0 is a microservice that lets you manage users, user authentication, and user authorization. Many companies when they first start out use Auth0 so they do not have to secure user data themselves. - - Start understanding and following this [guide](https://auth0.com/blog/complete-guide-to-react-user-authentication/) by the Auth0 team. - -2. Add additional graphs using Plotly.js - - Plotly.js is a popular Javascript plotting library. Making data visualizations accurately is a difficult task and takes a team of web developers and data scientists to complete. - - You can challenge yourself by trying implement another graph for the data provided. \ No newline at end of file diff --git a/tickets/stretchTicketNEXTjs.md b/tickets/stretchTicketNEXTjs.md new file mode 100644 index 000000000..2be71528c --- /dev/null +++ b/tickets/stretchTicketNEXTjs.md @@ -0,0 +1,42 @@ +# Migrate to Next.js + +Before starting work on this ticket, ensure you have: + +1. Completed the previous sprints and tickets. +2. Familiarized yourself with the existing React application structure. +3. Basic understanding of Next.js. If not, go through the [official Next.js documentation](https://nextjs.org/docs/getting-started). + +### Objective + +Migrate the current React application to Next.js. The aim is to leverage server-side rendering, better performance, and routing capabilities provided by Next.js. + +### Relevant Guides + +For a step-by-step guide on how to transition from React to Next.js, refer to: `https://nextjs.org/docs/migrating/from-react` + +### Guidance + +1. **Initialize a Next.js App**: Begin by setting up a new Next.js project using the `create-next-app` command. This will help in understanding the default structure Next.js provides. +2. **File & Directory Structure**: Adapt the existing React file and directory structure to fit the Next.js paradigm. Especially, move pages to the `pages/` directory to make use of Next.js's file-system based routing. +3. **Routing**: Replace React Router (if being used) with Next.js's in-built file-system based routing. Make use of `next/link` for internal links. +4. **State Management**: If the app uses context or other state management libraries, ensure they are compatible with Next.js. Make use of `getServerSideProps` or `getStaticProps` if server-side data fetching is necessary. +5. **Styling**: Ensure that the styling and CSS-in-JS libraries being used are compatible with Next.js. +6. **Authentication**: As the app has Auth0 integrated, ensure that authentication flows work correctly with Next.js. +7. **Testing**: Ensure that all components and pages work as expected. Migrating to Next.js might cause unexpected issues, so thorough testing is crucial. +8. **Optimization**: Leverage Next.js features like Image Optimization, ISR, etc., where possible. + +### Requirements + +1. Do not upgrade to a Node version higher than 16.16.0. If you are, continue to use `nvm` (for Mac) or `nvm-windows` to manage your node versions. +2. Ensure that all existing functionality and components of the React app are working as expected after the migration. +3. Maintain the integrity of the main files and ensure the application can be presented and demonstrated without issues. + +## Deliverables + +Submit the following for review: + +- Link to your forked repo with the migrated Next.js codebase. +- Link to a Loom video demonstrating the successful migration and showcasing the application's functionality post-migration. +- A brief document highlighting any challenges faced during migration and how they were addressed. + +Remember, the primary goal is to smoothly transition the app to Next.js without losing any existing functionality. Good luck! \ No newline at end of file