Cloudsky is an open source project to create and note details of a project, thus better organize the notes of a company and so on with local store for now. The goal of this project is to include and learn more about next js and react js technologies with web concepts like SSR and SSG. Feel free to submit ideas and continue on this mission!
About more: cloudsky.app.
- Next JS
- Typescript
- Firebase Hosting
- Framer Motion
- Lottie Animations
Why Next JS?
With each passing year, we need to understand even more the concepts that are dominating the front-end world. So in addition to being the main reasons for creating this project, it will help us to better understand the structure and how to apply it with the SSR and SSG concepts.
Why Typescript?
Typescript has helped us a lot with typing and property awareness on external components within the application. With it, it has greatly facilitated the creation of components and the understanding of future devs in the project. This was one of the main reasons for using it.
Why Firebase?
With firebase there are several tools that help us to deploy our application. Using firebase hosting made this project very easy to deploy and index on Google 🤩.
Framer Motion?
Framer Motion was a great option for us to expand animations today in the react ecosystem. Framer has been coming with new features and facilitating animations with JSX. I strongly recommend using it in any application.
Why Lottie?
Lottie makes complex animations a lot easier when it comes to animations in seconds and can be easily created using Adobe Affter Effects, taking away from the large library of ready-to-use animations.
To run the project locally after cloning it on your local machine, just run the following commands in your terminal:
npm install
or you'd rather
yarn
an then npm run dev
We recommend version 12 or higher node version. We are currently not using any databases, rather we are storing everything locally. In short, if you uninstall the browser after accessing or storing something in cloudsky.app, you will lose everything.
To deploy, we use a new version of the firebase CLI that allows us to deploy the application with a web framework. First of all you install firebase CLI npm i firebase-tools -g and login with your account firebase login. Creating a new firebase project with your Google Account accessing https://console.firebase.google.com (It's so easy creating a project) and then:
#Initializing a project just hosting firebase feature
firebase init hosting
Soon after, it will be easy to deploy allowing firebase frameworks web experiments. Remembering that deploy with framework in firebase only allowed through version 11.14.2 or later :
firebase experiments:enable webframeworks
and now:
firebase deploy
or
#Deploying just hosting website
firebase deploy --only hosting