Codeimage Projects

[riccardoperra]

Feature

CodeImage projects will be the new way to store the snippets remotely. It will be the feature that will bring CodeImage to 1.0 version. At the moment the data is always saved locally, and you can have one snippet at a time. Thanks to Projects, any authenticated user will be able to save their snippets remotely and retrieve them in any time.

Dashboard

The dashboard will be the newest page of Projects. It will be accessible from the /dashboard url path and only for authenticated users.

Each project in the list will show these basic informations:

• Name
• used
• Create date
• Last update date

Once a project has been created, from the dashboard it will be possible to remove, change the name or clone an existing project.

Also, since each project is stored in the db, it will be publicly accessible with a link for anyone. Of course, only the creator user will be able to edit the snippet. For other users, there will be a lighter view without the editor, but with the possibility of inserting the project in their workspace in order to manage it.

Note Currently there are no limits of project creation

UI improvements

This release wll make some improvements to the editor UI. First, inter-ui font will be updated using the right font-variants. All the setting buttons like languages or theme will be moved into a new Settings dialog available through a menu.

Also, if not authenticated a Sign in button will be visible for everyone.

Backend

Project obviously needs a backend in order to sync the data remotely. It will be created a new package api which will contain the public source code of the fastify rest api backend. It will also be integrated with Prisma orm

Here the api routes that will be exposed from the backend:

• [GET] /api/v1/project: Get the list of all projects of the authenticated user*
• [POST] /api/v1/project: Creates a new project*
• [PUT] /api/v1/project/:id: Updated an existing project*
• [PUT] /api/v1/project/:id/name: Update the project name*
• [DELETE] /api/v1/project/:id: Delete an existing project*
• [GET] /api/v1/project/:id: Retrieves the project by id

*Only for authenticated Users

OAuth authentication and authorization flow

For the authentication there will be an external service in order to manage the user easily.

Here some ideas:

• Auth0
• Firebase
• Supabase

Users will be able to authenticate through Github provider. Once authenticated, they will send a token to the server that will take care of validating it. If not present, the user will be synchronized in the database without saving any personal information. You only need to enter an identifier. Also, users wil be able to delete their profile whenever they want, but they will not be able to restore their snippets.

TODOS

• [ ] https://github.com/riccardoperra/codeimage/issues/240

  Note users must be able to delete their account (ask for feedback)

• [ ] https://github.com/riccardoperra/codeimage/issues/241
• [ ] https://github.com/riccardoperra/codeimage/issues/55
• [ ] Github actions

  Note add export

• [X] Add badge component
• [ ] Add profile page
• [X] Add dashboard page
• [ ] Add Clone action
• [X] Add possibility to rename the snippet "workspace"
• [X] Refactor store state
• [X] Synchronize state with backend
• [X] Add menu component with solid-aria
• [X] Add base confirm dialog component
• [ ] Add IconButton component
• [ ] Refactor button component to handle both pointer and default cursor
• [ ] Move secondary actions to header menu (language selection, profile page, theme mode)
• [X] Add RadioField component with @solid-aria

Warning Clean up code

• [ ] Remove style attrs updating @codeimage/ui
• [ ] Remove store todo
• [ ] Add basic api interface
• [ ] Fix types

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: d2dc7c894942f54dbb1a7eca4b0c95db3c3757d0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@codeimage/ui	Minor
@codeimage/app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
codeimage	❌ Failed (Inspect)		Aug 12, 2022 at 1:03PM (UTC)

[github-actions[bot]]

Deploy preview for codeimage ready!

✅ Preview https://codeimage-n2lxxhr12-riccardoperra.vercel.app https://codeimage-pr-300.vercel.app

Built with commit d2dc7c894942f54dbb1a7eca4b0c95db3c3757d0. This pull request is being automatically deployed with vercel-action

[hackpirodev]

@riccardoperra maybe here miss a linked issue for fixing responsive problems? If you want I can create it...

[riccardoperra]

@riccardoperra maybe here miss a linked issue for fixing responsive problems? If you want I can create it...

Yes, it is missing but a new issue is not really needed since this ft is not currently merged into main. Just open a new PR in Draft with the description linked to #300 from this branch that willl be merged into feat/workspace