README.md

⚡ Next Excel GCP

• Next.js React used to connect to a GCP project excel sheet 'backend'
• Code from Fireship: Google Sheets… Your Next Database? with correction/user info.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

📚 General info

• Text from Google Docs Sheet displayed in simple table.
• Includes navigation from title to content page
• There is no styling

📷 Screenshots

📶 Technologies

• React v17 Javascript library.
• Next v11 minimalist framework for rendering react apps on the server.
• Google APIs Node.js Client npm module v78 client library for using Google APIs.
• React dangerouslySetInnerHTML "is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous."

💾 Setup

• Install dependencies using npm i
• Add GCP project credentials etc. as per tutorial
• npm run dev runs the Next app in the development mode. Open http://localhost:3000 to view it in the browser.
• npm run lint lints all files using ESLint - no warnings or errors

🔧 Testing

• N/A

💻 Code Examples

• function to display the posts with link to content page

export default function Post({ posts }) {
	return (
		<article>
			<h1>Posts</h1>
			<ul>
				{posts.map((v, i) => (
					<li key={v}>
						<Link href={`/posts/${i + 2}`}>
							<a>{v}</a>
						</Link>
					</li>
				))}
			</ul>
		</article>
	);
}

🆒 Features - Frontend

• Connecting to a GCP Docs Excel sheet using Next.js and not much code

📋 Status, Testing & To-Do List

• Status: Working
• To-Do: This could be expanded with pretty cards to display the data

👏 Inspiration

• Fireship: Google Sheets… Your Next Database?

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com